In this post, we are learning about Bootstrap Offset Column.
In previous post I wrote about what is Bootstrap?,
How to setup Bootstrap?,
Bootstrap Grid System,
Bootstrap Container Class and
Bootstrap Nested column .
We can skip the columns using 'offset'.Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more
spacing. The .col-xs=* classes do not support offsets, but they are easily replicated by using an empty
cell.To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left margin of a
column by * columns where * range from 1 to 11.
Currently Following class support the Offset Column :
• col-sm-offset-*
• col-md-offset-*
• col-lg-offse-*
• col-xl-offse-*
In the following example we have <div class="col-md-6">..</div>, we will center this using class .col-md-offset-3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<div class="container" style="background: cyan">
<div class="row">
<div class="col-12 col-sm-6 col-xs-6 col-md-6 col-lg-6 col-xl-6"
style="background: green">
<h1>Hello</h1>
</div>
<div class="col-12 col-sm-6 col-xs-6 col-md-6 col-lg-6 col-xl-6"
style="background: red">
<h1>World</h1>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-1 col-lg-8 col-lg-offset-1"
style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
<h1>Welcome to Bootstrap</h1>
</div>
</div>
</div>
</body>
</html>
Here is the output of the above code:
Output
In the above output, we can clearly see that we have created two different
row within the second row. Since the second row has the one column span, the background color (cyan) of the main container is now visible to us. This
way we can add spacing to row using Offset columns.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.