In this tutorial some examples of bootstrap girds will be explained. Hope you will enjoy this tutorial.
Example of Stacked-to-horizontal
In this examples there is a row which has four columns. The width of
each column will 25% according to larger screens. These columns will
increased and decrease according to the screen width. In this example
class col-sm-3 means 3 columns out of 12 because there
are 12 columns in a row.
<divclass="container"><divclass="row"><divclass="col-sm-3 bg-info"><p>Dummy text 1...</p></div><divclass="col-sm-3 bg-success"><p>Dummy text 2...</p></div><divclass="col-sm-3 bg-warning"><p>Dummy text 3...</p></div><divclass="col-sm-3 bg-primary"><p>Dummy text 4...</p></div></div></div>
Output of above code
Dummy text 1...
Dummy text 2...
Dummy text 3...
Dummy text 4...
Example of Fluid container
This example is similar to above example but the difference
is , the container class has some padding and margins. While
the class container-fluid is used for full width
box. Similarly it's columns will increase and decrease according
to the screen width.
<divclass="container-fluid"><divclass="row"><divclass="col-sm-3 bg-info"><p>Dummy text 1...</p></div><divclass="col-sm-3 bg-success"><p>Dummy text 2...</p></div><divclass="col-sm-3 bg-warning"><p>Dummy text 3...</p></div><divclass="col-sm-3 bg-primary"><p>Dummy text 4...</p></div></div></div>
Output of above code
Dummy text 1...
Dummy text 2...
Dummy text 3...
Dummy text 4...
Example of Auto Layout Columns
In this example there is not any column number declared. The width of the columns will increase and decrease automatically according the screen width.
<divclass="container-fluid"><divclass="row"><divclass="col-sm bg-info"><p>Dummy text 1...</p></div><divclass="col-sm bg-success"><p>Dummy text 2...</p></div><divclass="col-sm bg-warning"><p>Dummy text 3...</p></div><divclass="col-sm bg-primary"><p>Dummy text 4...</p></div></div></div>
Output of above code
Dummy text 1...
Dummy text 2...
Dummy text 3...
Dummy text 4...
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
