How to use Bootstrap to align labels with content into 4 columns ? Last Updated : 08 Jul, 2019 Comments Improve Suggest changes Like Article Like Report 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. The class "row" creates a row into which the content will be placed and the class "col" creates partitions in that row making space for 4 labels or 4 items to be placed in that row. This example uses Bootstrap to create four columns where the first two columns represent the labels and its content and the last two columns represent the labels and its content. Example: HTML <!DOCTYPE html> <html> <head> <title> How to use Bootstrap to align labels with content into 4 columns ? </title> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href= "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> form { margin-top: 30px; margin-bottom: 30px; padding-bottom: 25px; } .form-area { margin-top: 30px; } label { display: block; color: black; font-weight: bold; } </style> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <hr> <form> <div class="row"> <div class="col"> <div class="row"> <div class="col"> <label>HTML</label> </div> <div class="col"> <p> Learn to Design your First Website in Just 1 Week </p> </div> </div> <div class="row"> <div class="col"> <label>CSS</label> </div> <div class="col"> <p> Cascading Style Sheets, fondly referred to as CSS </p> </div> </div> <div class="row"> <div class="col"> <label>JavaScript</label> </div> <div class="col"> <p>JavaScript Tutorials</p> </div> </div> </div> <div class="col"> <div class="row"> <div class="col"> <label>Front-end</label> </div> <div class="col"> <p style="font-weight: italic; color: grey"> “Front End” typically refers to all the kinds of stuff that the user actually sees on the website, once it loads completely. This is why it is also called the “client-side” of the front-end. </p> </div> </div> </div> </div> </form> </body> </html> Output: Comment More infoAdvertise with us Next Article How to use Bootstrap to align labels with content into 4 columns ? Y YashGandhi5 Follow Improve Article Tags : Web Technologies Bootstrap Similar Reads How to align columns in a row on text end using Bootstrap 5 ? In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hove 2 min read How to make a Row with 7 Equal Columns in Bootstrap ? Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1 for each of the 7 columns. This way, each column will occ 2 min read How to align pills to center in Bootstrap ? Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. If you are new to Bootstrap we highly recommend going through our Bootstrap 4 introduction.Pills are a kind of Bootstrap badge with more rounded corners. Pills by default will act as an inline- 2 min read How to align content bottom on Bootstrap 4 col ? Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used. In this article, we will learn about How to align content bottom on Bootstrap 4 col. Table of Conten 2 min read How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl 3 min read 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 lay 3 min read How to Center the Content inside a Column in Bootstrap? Centering content inside a Bootstrap column involves aligning text, images, etc., horizontally for improved visual presentation and readability. Use text-center for inline elements or mx-auto for block elements, and Use d-flex property to ensure proper alignment and visual appeal. Table of Content U 2 min read 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 align nested form rows using Bootstrap 4? Bootstrap is a CSS framework used to design web pages. Bootstrap along with HTML and JavaScript results in interactive web designs. The most recent release is Bootstrap v4.5. Bootstrap has a variety of components and utilities. The Bootstrap components include the form component. Bootstrap has an in 4 min read How to set one column control over height in Bootstrap ? Creating an HTML document using Bootstrap and make more than one column. The task is to set the control to a column over the height using Bootstrap. The way to do this is by utilizing another div interior in the left column. The inward div ought to be position: absolute. Example: HTML <!DOCTYPE h 2 min read Like