InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Why Offset Columns introduced in Bootstrap |
|
Answer» Move columns for more spacing to the right with offset columns in Bootstrap. For offsets on large displays, you need to use the .offset-md-* class. Through this, you can INCREASE the left margin of a column by * columns. The value of * here is from 1 to 11. Let us see an EXAMPLE: <!DOCTYPE html> <html lang="en"> <head> <TITLE>Bootstrap Example</title> <meta charset="utf-8"> <meta NAME="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Offset Columns</h1> <p><strong>Note: </strong>Resize the web browser to see the effect.</p> <div class="row" style="background-color:yellow;"> <div class="col-sm-5 col-md-6" style="background-color:green;color: white;">Demo</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:blue;color: white;">Demo</div> </div> </div> </body> </html>The FOLLOWING is the output, wherein you can see the left margin since we have set offset in the second column: |
|