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/bootstrap@5.3.0-alpha1/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:
How to Create a Basic Two-Column Layout using Bootstrap 5 ?
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.
Table of Content
- Grid System Approach
- Flex Box Approach
Contact Us