How to Create a Basic Two-Column Layout using Bootstrap 5 ?
Last Updated :
23 Feb, 2024
To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the layout, adapting it for various screen sizes.
Using Grid System
In this approach, Bootstrap's grid system is utilized to create a two-column layout. Each column is defined using the col-md-6 class, ensuring equal width on medium-sized screens and larger. Background color and borders are added using Bootstrap utility classes bg-light and border, respectively, to visually distinguish the columns.
Example: Implementation to create a basic two-column layout using the grid system.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Two-Column Layout</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 bg-light border">
<h4 class="text-center">Column 1</h4>
HTML stands for HyperText Markup Language.
It is the standard language used to create
and design web pages on the internet
</div>
<div class="col-md-6 bg-light border">
<h4 class="text-center">Column 2</h4>
CSS or Cascading Style Sheets is a stylesheet
language used to add styles to the HTML document.
It describes how HTML elements should be
displayed on the web page
</div>
</div>
</div>
</body>
</html>
Output:
Flex Box Approach
In this layout, the flexbox approach is used to create a two-column structure. The parent container is styled with the d-flex class to enable flexbox. Each column div is given the flex-grow-1 class to ensure they occupy equal space within the flex container. Additionally, Bootstrap's utility classes like bg-light and border are utilized for styling backgrounds and borders respectively, resulting in a visually appealing two-column layout.
Example: Implementation to create a basic two-column layout using flexbox approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Column Layout</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="d-flex">
<div class="flex-grow-1 bg-light border">
<h5 class="text-center">Column 1</h5>
HTML stands for HyperText Markup Language.
It is the standard language used to create
and design web pages on the internet.
</div>
<div class="flex-grow-1 bg-light border">
<h5 class="text-center">Column 2</h5>
CSS or Cascading Style Sheets is a stylesheet
language used to add styles to the HTML document.
It describes how HTML elements should be
displayed on the web page.
</div>
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to Create a Four-Column Layout with Bootstrap ? In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the ap
2 min read
How to create unequal columns in Bootstrap ? Bootstrap is a responsive framework created by Twitter. It is used to create responsive sites. It has a pre-defined class and design. In Bootstrap, we can add pre-defined classes into the code without writing code. We also have a predefined ".col" class to create columns. Grid Layout System: The who
2 min read
How to use Bootstrap to align labels with content into 4 columns ? The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns.
2 min read
How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read
How to Create a Multi-Column Footer in Bootstrap ? Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and re
3 min read
Bootstrap 5 Layout Column sizing Bootstrap 5 Layout Column sizing is used to set the width of the column element. To create equal widths columns, .col within .row classes are used. We can also use the subset of classes to set split the columns unequally. Layout Column sizing used Classes: .row: This class is used to create rows for
2 min read