If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to change Bootstrap grid layout

Hi! In this tutorial we’ll show you how to change Bootstrap grid layout of your HTMLtemplate.

JS Animated. How to change Bootstrap grid layout

  1. 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:

    how_to_change_botstrap_grid_layout_1

  2. 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.

  3. Locate the Bootstrap classes in the HTML window:

    how_to_change_botstrap_grid_layout_2

  4. 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:

    how_to_change_botstrap_grid_layout_3

  5. Save the file and refresh your site to see how it looks:

    how_to_change_botstrap_grid_layout_4

Now you know how to change Bootstrap grid layout of your HTML template.
Feel free to check the detailed video tutorial below:

JS Animated. How to change Bootstrap grid layout

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.