[vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][container][text_output]
Table of Contents
In this tutorial we will discuss:
- Bootsrap Column Layout
- Multiple Column Classes
- Bootstrap Helping Material
In Previous tutorial, we discussed the grid system and, the use of containers and rows.[/text_output][/container][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/1″][vc_widget_sidebar sidebar_id=”ups-sidebar-bootstrap3″][/vc_column_inner][/vc_row_inner][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/1″ id=”column-layout” class=”” style=””][text_output]
Columns
Columns take your design and divide it into vertical groups, making it responsive. When they are created, gutters are also created. The gutters add 15px on each side of the column. Bootstrap divides a row into 12 columns.
Columns Layout
To divide the element into columns, add “col-SIZE-SPAN” in that element within the row div. The contents of the code are as follow:
- col: Key word
- Size: Specifies size w.r.t breakpoints
- Span: Specifies the number of column
Size of Columns
Bootstrap provides 4 different column sizes based on breakpoints that 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 the change of the breakpoints.[/text_output][/vc_column_inner][/vc_row_inner][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/1″][lightbox selector=”.x-img-link” opacity=”0.875″ prev_scale=”0.75″ prev_opacity=”0.75″ next_scale=”0.75″ next_opacity=”0.75″][image link=”true” info=”tooltip” info_place=”bottom” info_trigger=”hover” src=”8702″ alt=”” href=”http://blog.hfarazm.com/wp-content/uploads/2017/01/column-breakpoints.jpg” title=”Column-Breakpoints” info_content=”http://blog.hfarazm.com/wp-content/uploads/2017/01/column-breakpoints.jpg” lightbox_thumb=”8702″ lightbox_caption=”” id=”” class=”.x-img-link” style=””][text_output]
[/text_output][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”multiple-column” class=”” style=””][text_output]
Multiple Column Classes
Multiple column classes can be used within a single div to adjust the contents of webpage w.r.t to different breakpoints.[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][text_output]
Offset columns:
Offset shifts content to the right side, leaving specified number of columns on left side of the webpage.
The following example shows multiple and offset column classes:[/text_output][text_output]
Example:
[/text_output][vc_raw_html]JTNDYSUyMGNsYXNzJTNEJTIyanNiaW4tZW1iZWQlMjIlMjBocmVmJTNEJTIyaHR0cCUzQSUyRiUyRmpzYmluLmNvbSUyRnFhcWltb2slMkZlbWJlZCUzRmh0bWwlMkNvdXRwdXQlMjIlM0VKUyUyMEJpbiUyMG9uJTIwanNiaW4uY29tJTNDJTJGYSUzRSUzQ3NjcmlwdCUyMHNyYyUzRCUyMmh0dHAlM0ElMkYlMkZzdGF0aWMuanNiaW4uY29tJTJGanMlMkZlbWJlZC5taW4uanMlM0YzLjQwLjMlMjIlM0UlM0MlMkZzY3JpcHQlM0U=[/vc_raw_html][text_output]
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Column-class-exp bt4">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using Column Classes</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- ==== Using columns ==== -->
<div class="row">
<div class="col-sm-6 sg-col">
<h3>6 column width </h3>
<p>This 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 </p>
</div>
<div class="col-sm-6 sg-col">
<h3>6 column width </h3>
<p>This content is occupying 6 column width for device size greater or equal to than 768 pixels . It will change to single column layout if screen size is less than 768 </p>
</div>
</div>
<!-- === Using Multiple Classes == -->
<div class="row">
<div class="col-md-4 col-lg-3 col-sm-6 mul-col">
<h3>Using Multile Column classes</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cupiditate accusamus provident commodi cumque nostrum, quas laborum, hic molestias vitae deserunt quaerat libero ipsam ducimus! Ducimus quod, cumque tempore temporibus! <br> <br>
col-sm-6: Change layout to 2 columns when size ≥ 768 <br>
col-md-4: Change layout to 3 column when size reduces from 992px <br>
col-lg-3: Change layout to 4 columns when size is more than 1200px
</p>
</div>
</div>
<div class="clearfix"></div>
<!-- === Using offset class == -->
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<h3>Offsetting Columns</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ex rerum vel laboriosam officia enim, excepturi, eveniet dolorem nihil nemo minima quam aliquid libero expedita. Accusantium, beatae sunt corporis!</p>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</body>
</html>[/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/2″][text_output]
Try it yourself..!!
[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”Try it” style=”flat” shape=”square” color=”green” align=”left” link=”url:http%3A%2F%2Fjsbin.com%2Fkugeho%2Fedit%3Fhtml%2Coutput|||”][/vc_column_inner][/vc_row_inner][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”1/1″][text_output]
Code Explanation:
Line 22,27:
- “col-sm-6” specifies that the content occupies 6 columns for device size >= 768 pixels and will change to single column if size < 768.
- “sg-col” is the custom class for external CSS
Line 34: Multiple column classes are used.
- “col-sm-6” changes the layout to 2 columns (6*2 = 12), each of 6 column width for device size >= 768px.
- “col-md-4” changes the layout to 3 columns (3*4=12) , each of 4 column width for device size >= 992px.
- “col-lg-3” changes the layout to 4 columns (4*3=12) , each of 3 column width for device size >= 1200px.
- “col-mul” is for external CSS.
Line 44: Bootstrap helper class to remove styles of parent div.
Line 47: “col-xs-offset-3” offset 3 columns from left for device size < 750px and shifts contents to the right.[/text_output][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”helper-classes” class=”” style=””][text_output]
Conclusion:
In this tutorial, we have discussed bootstrap columns classes, how to use multiple and offset column classes of bootstrap.
[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/1″ id=”Project-Files” class=”” style=””][vc_btn title=”Download Project Files” style=”flat” shape=”square” color=”green” align=”center” link=”url:https%3A%2F%2Fgithub.com%2Fhfarazm%2FBootstrap-3-Tutorials-Hfarazm.com||target:%20_blank|”][text_output]In the next tutorial, we will discuss bootstrap helping classes and will design our first bootstrap page.. See you next time.[/text_output][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/1″ id=”quiz” class=”” style=””][vc_raw_html]JTNDaHIlM0UlNUJXcFByb1F1aXolMjA1JTVEJTNDaHIlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/2″][vc_btn title=”< Previous Tutorial” style=”flat” shape=”square” color=”green” align=”center” link=”url:http%3A%2F%2Fblog.hfarazm.com%2Fpart-3grid-system-breakpoints-container-types-rows%2F||target:%20_blank|”][/vc_column][vc_column fade_animation_offset=”45px” width=”1/2″][vc_btn title=” Next Tutorial on 23 Jan >” style=”flat” shape=”square” align=”center” link=”url:%23||target:%20_blank|”][/vc_column][/vc_row][vc_row padding_top=”0px” padding_bottom=”0px”][vc_column fade_animation_offset=”45px” width=”1/1″][share title=”Share this Post” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” reddit=”true” email=”true” id=”” class=”” style=””][/vc_column][/vc_row]
