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. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right






                        filter_none








Output: 





          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
YashGandhi5
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.