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

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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"               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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"               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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"               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.
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?