Menu
What's exactly the purpose of col-md-offset-*?
I know the purpose of col-md-12 without the offset. but with that I've no idea, I've tried to play with it but still nothing.
849
Offset classes Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
Bootstrap By Building Projects - Includes Bootstrap 4 An offset is used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes. You can try to run the following code to learn how to work with offset columns in Bootstrap −
col-md-4: This class is used when the device size is medium or greater than 768px and the maximum width of container is 720px and you want the width equal to 4 columns. col-xs-1: This class is used when the device size is extra small (mobile) and when you want the width to be equal to 1 column.
offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right.
Short version of answer. Offset make empty column with custom width before our column with data. If you want to make empty column with custom width after your column with data then use pull (col-md-pull-*).
Example: In medium size window we want to create 2 empty cells, 7 cells with content and again 3 empty cells. We could do that this way.
<div class="row">
<div class="col-md-offset-2 col-md-7 col-md-pull-3">OUR CONTENT</div>
</div>
And this is how it would look like without offsets. We should create empty divs with custom width.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-7">OUR CONTENT</div>
<div class="col-md-3"></div>
</div>
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-2 moves .col-md-2 over four columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
