Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 21 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads