Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 21 May, 2020

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.




<!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>

Output:

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




<!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>

Output:



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




<!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>

Output

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :