Home > DeveloperSection > Articles > Bootstrap Grid and Image style

Bootstrap Grid and Image style


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 3186  View(s)
Rate this:

Bootstrap Grid and Image style

Hi I’m explaining bootstrap component like grid and image classes

Grid System

As you may know, in graphics design, a Grid system is a two dimensional structure made up of horizontal and vertical axes having intersecting areas, useful for structuring content. It is widely used to design layout and content structure in print design.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Bootstrap Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works.

Bootstrap having 12 columns Bootstrap having 4 type columns.

Extra small device (<768px) Phones:-  syntax (.col-xs-2)

Small devices (>=768px) Tablets:-  syntax (.col-sm-2)

Medium Devices (>=992px) Desktop:-  syntax (.col-md-2)

Large Devices (>=1200px) Desktop:-  syntax (.col-lg-2)

  • Rows must be placed within a .container class for proper alignment and padding.
  • Columns must be placed within a .row class.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns.

Example

 

<div class="container">

    <div class="row">

        <div class="col-md-4 well">

            4

        </div>

        <div class="col-md-4 well">

            4

        </div>

        <div class="col-md-4 well">

            4

        </div>

    </div>

    <div class="row">

        <div class="col-md-2 well">

            2

        </div>

        <div class="col-md-2 well">

            2

        </div>

        <div class="col-md-2 well">

            2

        </div>

        <div class="col-md-2 well">

            2

        </div>

        <div class="col-md-2 well">

            2

        </div>

        <div class="col-md-2 well">

            2

        </div>

    </div>

    <div class="row">

        <div class="col-md-3 well">

            3

        </div>

        <div class="col-md-3 well">

            3

        </div>

        <div class="col-md-3 well">

            3

        </div>

         <div class="col-md-3 well">

            3

        </div>

    </div>

    <div class="row">

        <div class="col-md-6 well">

            6

        </div>

        <div class="col-md-6 well">

            6

        </div>

    </div>

    <div class="row">

        <div class="col-md-5 well">

            5

        </div>

        <div class="col-md-7 well">

            7

        </div>

    </div>

</div>

 

Result:

Bootstrap Grid and Image style

 

Example Offset:

<div class="container">

    <div class="row">

        <div class="col-md-4 well">

            4

        </div>

        <div class="col-md-4 col-md-offset-4 well">

            4

        </div>

    </div>

    <div class="row">

        <div class="col-md-2 col-md-offset-4 well">

            2

        </div>

        <div class="col-md-2 col-md-offset-4 well">

            2

        </div>

        <div class="col-md-2 well">

            2

        </div>

    </div>

    <div class="row">

        <div class="col-md-3 well">

            3

        </div>

       

        <div class="col-md-3 col-md-offset-3 well">

            3

        </div>

         <div class="col-md-3 well">

            3

        </div>

    </div>

</div>

 

Result:

Bootstrap Grid and Image style

 

Images

In this topic I will explaining how to make image more attractive. So make easier these task bootstrap provide some classes.

Example

<div class="container">

    <div class="row">

        <div class="col-md-6">

            <h4 class="text-primary">Image without use bootstrap class</h4>

            <img src="~/Content/img/discovery.jpg" />

        </div>

        <div class="col-md-6">

            <h4 class="text-primary">Image after use bootstrap class</h4>

            <img src="~/Content/img/discovery.jpg" class="img-rounded" />

        </div>

    </div>

</div>

Result Image Rounded:

Bootstrap Grid and Image style

 

Result Image Circle:

<img src="~/Content/img/discovery.jpg" class="img-circle" />

 

Bootstrap Grid and Image style

 


Don't want to miss updates? Please click the below button!

Follow MindStick