How to Create Multiple Responsive Columns with Bootstrap 3
Would you like to improve your website responsiveness with Bootstrap? The most important aspect of Bootstrap is its 12-column mobile first grid system. This is what you use to create a responsive layout.
In this video tutorial, you are going to create a basic website using Bootstrap and learn how to use Bootstrap grid system to create a responsive layout with multiple columns.
Before Watching the Tutorial
Before you are able to follow the video tutorial below and learn how to create your own responsive columns, you will need:
- Basic understanding of what Bootstrap is
- Basic understanding of what Bootstrap grid system is
- Download Bootstrap to your hard drive
- Create a basic Bootstrap index.html file to build upon
What Is Bootstrap
- Bootstrap is a framework for HTML, CSS and JavaScript developers working on website responsiveness.
- It consists of already pre-built responsive CSS styling for columns, lists, navigation, web forms and many other web elements.
Understanding Bootstrap Grid System
- Bootstrap grid system classifies screen sizes into four types: Extra-small, Small, Medium and Large.
- The Extra-small is for mobile phones. The Small is for tablets, like I-Pad. The Medium is for desktop monitors. And the Large is just for larger desktop monitors.
- To help you fine tune responsiveness for these four types of screens, Bootstrap divides the width of web viewing devices into the 12-column grid system.
- Every one of those four Bootstrap Grid types becomes responsive only if you assign to it its own designated CSS class.
- For example, to make a div responsive for extra small devices, the div must have its own Bootstrap .col-xs-<number_of_columns_to_take> class, like <div class=”col-xs-6″>.
Downloading Bootstrap
- Go to getboostrap.com and click on the “Download Bootstrap” button:
- You’ll see the “Getting Started” page. Click on the “Download Bootstrap” button:
- Save this file to your computer hard drive, anywhere you want. It doesn’t have to be saved to a web server.
- Unzip this file and rename the extracted folder to “bootstrap”.
Getting Ready Your Basic Bootstrap index.html Page
Step #1. Create Your Bootstrap index.html File
- Get back to the “Getting Started” (http://getbootstrap.com/getting-started/#download) page and click on the “Basic Template” link on the right sidebar:
- You will see the “Basic template” code. Click on the “Copy” button to copy the code:
- Paste the “Basic Template” code in your text editor and save it as index.html in the same folder, where you saved the “bootstrap” folder. It will now become your Bootstrap site front page.
- Open the newly created index.html and take a look at your basic Bootstrap website:
- Open the index.html file in your text editor and between the opening <body> and <h1> tags add <div class=”container”> (1). Close this new div after the closing </h1> tag (2) and save the file:
- Check the page front end and notice how the “Hello World!” is not stuck to the edge of the page anymore and has now moved slightly to the right, to make it look a bit tidier. The Bootstrap’s “container” class you assigned to this div has added to this text some margin:
- Go back to your index.html file. Between the <h1> and </h1> tags replace the “Hello World!” to “Trusthub”. Save the file and check your site front end.
Step #2. Add Some Content and a Sidebar
- Get back to your index.html file and underneath the <h1>Trustub</h1> code copypaste the following code:
<div class="row">
<div>
<h2>What Trusthub can do for you</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
</div>
<div>
<h2>Our Team</h2>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p>
</div>
</div>- Go back to your site front end. Refresh it. You should now see your content and the “Our Team” sidebar, without columned responsive layout yet:
- Go back to the getbootstrap.com website and on the top menu click on the “CSS” button:
- On the sidebar click on the “Grid System” button:
- Scroll down the page to the “Grid options” section (1) and take note of the Bootstrap 12-column grid system with its four screen sizes types, their width and their designated CSS class prefixes (2):
- Don’t worry if Bootstrap grid system options don’t make sense for you yet. It will all come together for you in a second when you start playing around them on your site.
- Open up your index.html file once again and underneath the <div class=”row”>, for your existing <div> enter class “col-md-9”. Your new div now should look “div class=”col-md-9”>:
- Now go to your div, located right above the <h2> “Out Team” header and give it the “col-md-3” Bootstrap grid CSS class. Save the file:
- Go back to your site to see this change in action. Press F5 key on your keyboard to refresh your website. Now you will see that your content area and the sidebar are sitting side by side.
- Your content div is now taking up 9 of the available in its Bootstrap grid 12 columns (75% of the whole desktop screen width). And your sidebar takes 3 of its Bootstrap grid 12 columns (25% of the whole desktop screen width):
Brilliant! You are now all set to follow the video tutorial bellow. Let’s get started.
Congratulations! You just learned how to create responsive web page layout with multiple columns using Bootstrap. Would you like to learn more about Bootstrap? If yes, please visit our OSTraining YouTube channel and watch the “Bootstrap Framework Tutorials“.
Thank you so much it is too easy to implement now