Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to split a column of list in different rows using Bootstrap?
Bootstrap is a widely used front-end framework for building responsive and mobile-friendly web pages. It was initially created by Twitter and is now maintained by the Bootstrap team, which is an open-source community of developers.
One of the primary benefits of Bootstrap is that it allows developers to create responsive designs that work seamlessly across different screen sizes and devices. This means that websites and applications built with Bootstrap can adapt to various devices, such as smartphones, tablets, and desktops, providing users with a consistent and engaging user experience.
In this article, we’ll see how to split a column of a list into different rows using Bootstrap. Splitting a column of lists into different rows can be challenging to perform, but with the help of Bootstrap, it can be done easily.
Different Approaches to Split a Column of a List into Different Rows using Bootstrap
There are several approaches used to split a column of a list into different rows using Bootstrap but in this article, we are going to see some of the commonly used approaches. Let’s see them one by one in detail.
Approach 1: Using Grid System
The Bootstrap Grid System is a powerful tool for creating responsive layouts. It uses a series of containers, rows, and columns to layout and aligns content to design the webpage. It’s built with flexbox and is fully responsive. It is based on a 12-column grid, which can be divided into rows and columns. To split a column of a list into different rows using the Bootstrap Grid System, see the below syntax −
Syntax
Below is the syntax to split a column of a list into different rows using the grid system of Bootstrap.
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
Example
In this example, we have used the col-md-6 class to split the column into two equal parts which is the easiest method.
<html>
<head>
<title>Splitting a Column of List Using Bootstrap Grid System</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
<li class="text-bg-success p-2 col">List Item 1</li>
<li class="text-bg-success p-2 col">List Item 2</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li class="text-bg-primary p-2 col">List Item 3</li>
<li class="text-bg-primary p-2 col">List Item 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Approach 2: Using FlexBox
The Bootstrap Flexbox is a flexible box layout model that allows developers to create responsive and dynamic layouts. The Flexible Box Layout in Bootstrap is used to design a flexible responsive layout structure without using float or positioning of a webpage.
To split a column of a list into different rows using the Bootstrap Flexbox, see the below syntax −
Syntax
Below is the syntax to split a column of a list into different rows using the flexbox classes of Bootstrap.
<div class="container">
<div class="row">
<div class="col-md-6 d-flex flex-wrap">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="col-md-6 d-flex flex-wrap">
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
Example
In this example, we have used the d-flex and flex-wrap bootstrap classes to set the display property of the column to flex and wrap the items into multiple rows.
<html>
<head>
<title>Splitting a Column of List Using Bootstrap Grid System</title>
<link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container d-flex flex-wrap">
<div class="flex-grow-1">
<ul>
<li class="text-bg-success p-2 col">List Item 1</li>
<li class="text-bg-success p-2 col">List Item 2</li>
<li class="text-bg-success p-2 col">List Item 3</li>
</ul>
</div>
<div class="flex-grow-1">
<ul>
<li class="text-bg-primary p-2 col">List Item 4</li>
<li class="text-bg-primary p-2 col">List Item 5</li>
<li class="text-bg-primary p-2 col">List Item 6</li>
</ul>
</div>
</div>
</body>
</html>
Approach 3: Using Card Component
Bootstrap card component is customizable that can be used to display content in different ways. To split a column of list in different rows using the Bootstrap Card Component, see the following syntax −
Syntax
Below is the syntax to split a column of a list into different rows using the card component of Bootstrap.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<ul>
<li>Item 1</li>
…
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<ul>
<li>Item 3</li>
…
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Example
In this example, we have used the Bootstrap grid system and divided the column into two equal-sized columns using the col-md-6 class as it will make sure that the cards are displayed side-by-side on medium-sized screens and stacked on smaller screens with the help of bootstrap predefined media queries.
<html>
<head>
<title>Splitting a Column of List Using Bootstrap Grid System</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container my-4 mx-10">
<div class="row">
<div class="col-md-5">
<div class="card">
<div class="card-header bg-primary text-white">Header 1</div>
<ul class="list-group list-group-flush">
<li class="text-bg-success p-2 col">List Item 1</li>
<li class="text-bg-success p-2 col">List Item 2</li>
<li class="text-bg-success p-2 col">List Item 3</li>
</ul>
</div>
</div>
<div class="col-md-5">
<div class="card">
<div class="card-header bg-primary text-white">Header 2</div>
<ul class="list-group list-group-flush">
<li class="text-bg-success p-2 col">List Item 4</li>
<li class="text-bg-success p-2 col">List Item 5</li>
<li class="text-bg-success p-2 col">List Item 6</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Conclusion
In this article, we learned how to split a column of a list into different rows using Bootstrap. Bootstrap is an efficient front-end framework that provides developers with the tools to create responsive designs that work seamlessly across different devices. We learned three approaches to accomplish the task i.e, the Grid System, the Flexbox, and the Card component. By utilizing these Bootstrap components, developers can efficiently split columns of lists into different rows, improving the overall design and functionality of their website or application.
1K+ Views
To Continue Learning Please Login