How to split a column of list in different rows using bootstrap?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Splitting List Into Columns</title>
  
        <!-- Linking BootStrap 4 CDN to HTML application -->
        <link rel="stylesheet" href=
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
  
        <!--Styling the webpage using CSS -->
        <style type="text/css">
            .col {
                background-color: yellow;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center display-4">Column</h1>
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col">Row 1</div>
                    </div>
                    <div class="row">
                        <div class="col">Row 2</div>
                    </div>
                    <div class="row">
                        <div class="col">Row 3</div>
                    </div>
                    <div class="row">
                        <div class="col">Row 4</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output:

Example 2: In this example we splits column of the list into rows by adding class attribute in <li> tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Splitting List Into Columns</title>
        <link rel="stylesheet" href=
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
  
        <style type="text/css">
            .col-12 {
                background-color: skyblue;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center display-4">Column</h1>
            <ul>
                <li class="col-12">Row 1</li>
                <li class="col-12">Row 2</li>
                <li class="col-12">Row 3</li>
                <li class="col-12">Row 4</li>
            </ul>
        </div>
    </body>
</html>

chevron_right


Output:



Example 3: In this example we splits the column of a list into rows by nested divisions.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Splitting List Into Columns</title>
        <link rel="stylesheet" href=
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
  
        <style type="text/css">
            .col-12 {
                background-color: lightgreen;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center display-4">Column</h1>
            <div class="col-12">Row 1</div>
            <div class="col-12">Row 2</div>
            <div class="col-12">Row 3</div>
            <div class="col-12">Row 4</div>
        </div>
    </body>
</html>

chevron_right


Output

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.