With each passing day, new devices with new screen sizes are popping up - and as web developers, we need to create web applications that are responsive to these various screen sizes. There are multiple ways you can create a responsive layout, however I find Bootstrap grid layout to be the easiest. In this post, we will cover various aspects of the Bootstrap Grid system with various examples. To start with let us create a four equal column layout for medium-sized devices in Bootstrap Grid system.

4 equal columns layout

To create the layout, you need to complete the following steps:

1.       Create a div with class container for fixed width or container-fluid for the full width of the screen

2.       Create a div with class row. Div with the class row must be inside container

3.       Create 4 divs for 4 columns.  Div of the column must be the immediate child of the row div

4.       Content will be inside the column div