BootStrap is the most popular, free, and open-source CSS framework used for front-end web development. BootStrap 4 is the latest version being used. BootStrap 4 offers a wide range of components, content, layout, and utilities to work with. Bootstrap 4 offers a grid system that uses a series of containers, rows, and columns to layout and aligns content. The grid system allows users to create grids with custom specifications. The grid system is built with a flexbox and is fully responsive and can adjust the column size according to the screen size. Containers are the most basic layout element in Bootstrap that is required while using the grid system. The column of a list can be split into rows using the grid system of BootStrap. The ‘row’ and ‘col’ classes of BootStrap enables splitting any area into rows and columns. The following codes can be used to split a column of the list in different rows using BootStrap.
Consider the following list:
- Row 1
- Row 2
- Row 3
- Row 4
Example 1: In this example we splits the columns of the list into rows using nested rows and columns.
Example 2: In this example we splits column of the list into rows by adding class attribute in <li> tag.
Example 3: In this example we splits the column of a list into rows by nested divisions.
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- How to set one column control over height in Bootstrap ?
- How to change column to row on small display in Bootstrap 4 ?
- Split a column in Pandas dataframe and get part of it
- Split a text column into two columns in Pandas DataFrame
- Bootstrap 4 | List Groups
- List group in bootstrap with examples
- How to add active class on click event in custom list group in Bootstrap 4 ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference between Bootstrap 4 and Bootstrap 5
- Difference Between Bootstrap 3 and Bootstrap 4
- How to fix the height of rows in the table?
- Grouping Rows in pandas
- Space between two rows in a table using CSS?
- HTML | rows Attribute
- HTML | DOM Table rows Collection
- HTML | DOM Textarea rows Property
- CSS | grid-auto-rows Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.