Bootstrap-Tutorial-series-bootstrap-column-multiple-columns-helper-classes-layout-responsive-layout-hfarazm

Tutorial 4:Columns, Helping classes, First Bootstrap Page

In Bootstrap by MubeenLeave a Comment

In this tutorial we will:

  1. Discuss bootsrap Column Layout
  2. Use Multiple classes
  3. Bootstrap Helper Classes
  4. Create first layout
  5. Bootstrap Helping Material
    1. Video
    2. Project Files
    3. Quiz

In Previous tutorial we discussed grid system ,use of container and rows.

Columns Layout

Bootstrap gives ability to divide each row into 12 columns using “column” class inside “div” tag. Column class is as follows:

“Col-Size-Width”

  • Col: key word
  • Size: Specifies size w.r.t breakpoint (sm,md,xs,lg)
  • Width: Size of column (1-12)

 

Size of Columns

Bootstrap provides 4 different column sizes based on breakpoints and are used for different screen sizes.

  • col-xs = For extra small devices
  • col-sm = For small devices
  • col-md = For medium devices
  • col-lg = For large devices

Note: Layout changes to full width on change of breakpoint

Header has to be Green

Using Multiple Column Classes

Multiple column classes can be used within a single div to customize the behavior of webpage for showing different content arrangement on different breakpoints.

Offset columns:

Offset  shifts content on right side leaving specified number of columns on right side. Offset columns can be visualized in following example.

Example: (Column , Multiple column classes , Offset Columns)

Try it yourself..!!

Code Explanation:

Line 22,27:

  1. Class  “col-sm-6”. Content is occupying 6 column width for device size greater than or equal 768 pixels . It will change to single column layout if screen size is less than 768
  2. Class : sg-col: Custom class for external CSS

Line 34: Multiple bootstrap classes are used.

  1. col-sm-6: Change layout to 2 columns (6*2=12), each of 6 column width for device size more than or equal to 768px.
  2. col-md-4: Change layout to 3 columns (3*4=12) , each of 4 column width for device size more than or equal to 992px.
  3. col-lg-3: Change layout to 4 columns (4*3=12) , each of 3 column width for device size more than or equal to 1200px.
  4. col-mul: For external Css (color & Background color)

Line 44: Bootstrap helper class to remove styles (float, padding e.t.c) of parent div.

Line 47: “col-xs-offset-3” offset 3 columns from left for devices less than 750 px (as xs is used) and shifts content to right side.

Bootstrap helping classes

                                                 Bootstrap provides helping classes to do specific changes in layout. Some important helping classes are described below. You can visit the link to see more helping classes http://getbootstrap.com/css/#helper-classes

  1. Show: Show content in block format (uses “!important” to show)
  2. Hidden: Hide a specific tag (uses “!important” to hide)
  3. Clearfix: Clear float of parent class
  4. Center-block: Centers content inside container
  5. Caret: Shows dropdown arrowhead and direction
  6. Pull-left: float content on left side
  7. Pull-right: Float content on right side

Try it yourself..!!

First Bootstrap Layout

We are starting our work on bootstrap layout and by the end of tutorial we will have our very own responsive mobile first layout ready.The layout will be of an imaginary music website.

We created our basic folder structure, integrated bootstrap and discussed different bootstrap components. We will use all our previous knowledge in this layout. As we move on we will keep on updating this layout.

Try it yourself..!!

Code Explanation

Line: 14:  A container div containing all page content.

Line 15: A “row” div containing three columns.

Line 16: A section is created to specify code content with class services

Line 18,24,30:

  1. Three column layout for medium and small devices. (will change to full with in case of extra small devices)
  2. Custom class “box” for borders and custom styling.

Line 19,25,31: Image tag for service images.

Line 20,26,32: Bootstrap class for service heading.

Line 21,27,33: <p> tag for service details.

Conclusion:

In this tutorial we discussed bootstrap columns, different layout column classes, using multiple column classes and helping classes of bootstrap. In the end we designed our first bootstrap layout.

In next tutorial we will discuss and use more bootstrap elements in our page and customize them as well. See You in next tutorial


Bootstrap Tutorial 4: Quiz Questions

Please enter your email to start FREE quiz.


Share this Post