Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Offset Columns in Bootstrap

Bootstrap Web Development CSS Framework

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 −

Example

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "box">
         <h1>Heading One</h1>
         <div class = "row" >
            <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>This is demo text. This is demo text.</p>
            </div>
         </div>
      </div>
   </body>
</html>
Updated on: 2020-06-12T08:59:08+05:30

6K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements