-->

25 April 2020

Bootstrap Offset Column

  Asp.Net CS By Example       25 April 2020

Bootstrap Offset Column

 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
Bootstrap Container Offset Column

 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.

logoblog

Thanks for reading Bootstrap Offset Column

Previous
« Prev Post

No comments:

Post a Comment

Please do not enter any spam link in the comment box.