Bootstrap Grid

  • Bootstrap contains 12 grids.
  • md for medium sized devices (Works for most of the devices)
  • lg for large devices.
  • sm for small devices.
  • xs for extra small devices.

Example :

        <link rel="stylesheet" href="">
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <div class="container-fluid">
            <!-- md support most of the desktops -->
            <div class="row">
                <div class="col-md-6" style="background-color: lightblue;">Hello</div>
                <div class="col-md-2" style="background-color: lightgreen;">World</div>
                <div class="col-md-4" style="background-color: orange;">World</div>
            <!-- xs for extra small devices -->
            <div class="row">
                <div class="col-xs-6" style="background-color: lightblue;">Hello</div>
                <div class="col-xs-2" style="background-color: lightgreen;">World</div>
                <div class="col-xs-4" style="background-color: orange;">World</div>
            <!-- sm for small devices -->
            <div class="row">
                <div class="col-sm-6" style="background-color: lightblue;">Hello</div>
                <div class="col-sm-2" style="background-color: lightgreen;">World</div>
                <div class="col-sm-4" style="background-color: orange;">World</div>
            <!-- lg for large devices -->
            <div class="row">
                <div class="col-lg-6" style="background-color: lightblue;">Hello</div>
                <div class="col-lg-2" style="background-color: lightgreen;">World</div>
                <div class="col-lg-4" style="background-color: orange;">World</div>

Output :

Leave a Comment