Hi! In this tutorial we’ll show you how to change Bootstrap grid layout of your HTMLtemplate.
Open your site in any browser and inspect the element which width you need to change with developers tool. In our case it’s Firebug plugin in Firefox browser:
In HTML section of Firebug you will see div with grid class. In our case it’s col-md-3 col-sm-6 col-xs-12. Col-md-3 means this piece of content will take 1/4 of the row on desktop devices, col-sm-6 means it’ll take 1/2 of the screen of a tablet and col-xs-12 means it’ll take 100% of screen on mobile devices. Let’s make it take half of all the screens by changing its grid classes to col-md-6 col-sm-6 col-xs-6.
Locate the Bootstrap classes in the HTML window:
Open the HTML file you work on with your code editor (in our case it’s free Notepad++ editor) and replace the classes we located before (col-md-3 col-sm-6 col-xs-12) with col-md-6 col-sm-6 col-xs-6:
Save the file and refresh your site to see how it looks:
Now you know how to change Bootstrap grid layout of your HTML template.
Feel free to check the detailed video tutorial below:
We would recommend you to check our Bootstrap Admin Themes out and find out more about Bootstrap functionality.
In case you need more, check out our selection of responsive Bootstrap themes.