Open In App

How to Add 6 Rows of Paragraphs with Bootstrap 5 ?

Last Updated : 18 Oct, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap (CSS framework) is one of the most favorable frameworks that is also mobile-friendly for web application development. This means that the code and the template available on the Bootstepap apply to different screen sizes. Paragraphs in the application are the information-passing components that are represented in the Application. Bootstrap 5 provides different solutions to add 6 rows of parafg with Bootstrap 5. In this article, we will learn how we can add 6 rows of paragraphs with Bootstrap 5 classes.

Approaches to Add Rows of Paragraphs:

Below are the commonly used approaches to add 6 rows of paragraphs with Bootstrap 5.

Approach 1: Using Grid Bootstrap Classes

In this approach, we are using the Grid system of Bootstrap 5 to create the structure of the web application. Each row of the application is structured using the Bootstrap “row” class and within this each row there is a single column using (“col-,md-12“) spans with the full width of the size. Here, the grid classes ensure that the paragraphs are responsive inters of different screen sizes.

 

Syntax:

<div class="container">
<div class="row">
<div class="col-md-12">
<p>Paragraph.</p>
</div>
</div>
</div>

Example: In this example, we will add 6 rows of paragraphs with Bootstrap 5 using Grid Bootstrap Classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Rows Example</title>
    <link href=
        rel="stylesheet">
    <script src=
    </script>
  
    <style>
        h1 {
            color: green;
            text-align: center;
        }
  
        h3 {
            color: blue;
            text-align: center;
        }
  
        p {
            font-size: 20px;
            line-height: 1.5;
        }
  
        .row1 {
            background-color: #ffd700;
        }
  
        .row2 {
            background-color: #ff7f50;
        }
  
        .row3 {
            background-color: #90ee90;
        }
  
        .row4 {
            background-color: #6495ed;
        }
  
        .row5 {
            background-color: #ff69b4;
        }
  
        .row6 {
            background-color: #dda0dd;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3>Approach 1: Using Grid Bootstrap Classes</h3>
        <div class="row row1">
            <div class="col-md-12">
                <p>
                    <strong>Row 1:</strong> GeeksforGeeks is 
                    a computer science portal for geeks. It 
                    provides a wide range of articles, 
                    tutorials, and resources covering topics 
                    such as programming, data structures,
                    algorithms, computer science, and more. 
                    Whether you are a beginner or an expert, 
                    GeeksforGeeks has something to offer to 
                    everyone in the world of technology and 
                    coding.
                </p>
            </div>
        </div>
        <div class="row row2">
            <div class="col-md-12">
                <p>
                    <strong>Row 2:</strong> At GeeksforGeeks, 
                    you can learn about various programming 
                    languages, explore coding challenges, and 
                    stay updated with the latest trends in 
                    technology. Join a community of fellow
                    geeks who are passionate about coding and
                    problem-solving. Start your journey with 
                    GeeksforGeeks today and unlock a world of 
                    knowledge and innovation!
                </p>
            </div>
        </div>
        <div class="row row3">
            <div class="col-md-12">
                <p>
                    <strong>Row 3:</strong> GeeksforGeeks is 
                    your one-stop destination for all things 
                    tech. From programming basics to advanced 
                    concepts, you'll find comprehensive and 
                    well-explained content that will help you 
                    enhance your skills and excel in your 
                    coding endeavors. Keep learning, keep coding,
                    and keep exploring with GeeksforGeeks!
                </p>
            </div>
        </div>
        <div class="row row4">
            <div class="col-md-12">
                <p>
                    <strong>Row 4:</strong> Visit us at <a
                    href="https://www.geeksforgeeks.org/">
                    www.geeksforgeeks.org</a> to access our 
                    vast repository of knowledge. Follow us 
                    on social media for the latest updates, 
                    coding tips, and more. Join us in the
                    world of GeeksforGeeks and be a part of 
                    the global coding community!
                </p>
            </div>
        </div>
        <div class="row row5">
            <div class="col-md-12">
                <p>
                    <strong>Row 5:</strong> GeeksforGeeks is 
                    committed to providing high-quality 
                    educational content to help individuals 
                    succeed in the field of computer science 
                    and programming. With a dedicated team of
                    experts, we strive to empower our readers 
                    with the knowledge and skills they need 
                    to excel in their careers.
                </p>
            </div>
        </div>
        <div class="row row6">
            <div class="col-md-12">
                <p>
                    <strong>Row 6:</strong> Our mission is 
                    to make learning accessible and enjoyable 
                    for everyone. We believe that technology 
                    and coding have the power to transform 
                    lives and drive innovation. Join us on 
                    this exciting journey of discovery and 
                    self-improvement. Together, we can create 
                    a brighter future through code.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Screenshot-2023-09-29-at-21-43-08-Bootstrap-5-Rows-Example-min(1)-min

Approach 2: Using Flex Bootstrap Classes

In this approach, we are using the Flexbox Bootstrap classes that are used to create 6 rows of paragraphs. Here each row of paragraph is contained within the flex container with the class “d-flex” class and then organized in the horizontal flex layout using the “flex-row“. We have used different colors for each row to identify them uniquely. We have used as “flex-grow-1” class to ensure that the paragraph content expands to fill the available space evenly.

Syntax:

<div class="container">
<div class="d-flex flex-row bg-primary">
<div class="flex-grow-1">
<p class="text-white p-3">Paragraph</p>
</div>
</div>
</div>

Example: In this example, we will add 6 rows of paragraphs with Bootstrap 5 using FlexBox Bootstrap Classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Example</title>
    <link href=
        rel="stylesheet">
</head>
  
<body>
    <div class="container">
        <h1 class="text-center text-success">
            GeeksforGeeks
        </h1>
        <h3 class="text-center">
            Approach 2: Using FlexBox Bootstrap Classes
        </h3>
        <div class="d-flex flex-row bg-primary">
            <div class="flex-grow-1">
                <p class="text-white p-3">
                    GeeksforGeeks is a computer science portal 
                    for geeks. It provides a wide range of 
                    articles, tutorials, and resources covering 
                    topics such as programming, data structures,
                    algorithms, computer science, and more.
                </p>
            </div>
        </div>
        <div class="d-flex flex-row bg-success">
            <div class="flex-grow-1">
                <p class="text-white p-3">
                    At GeeksforGeeks, you can learn about various 
                    programming languages, explore coding 
                    challenges, and stay updated with the latest 
                    trends in technology.
                </p>
            </div>
        </div>
        <div class="d-flex flex-row bg-warning">
            <div class="flex-grow-1">
                <p class="text-dark p-3">
                    GeeksforGeeks is your one-stop destination 
                    for all things tech. From programming basics 
                    to advanced concepts, you'll find 
                    comprehensive and well-explained content.
                </p>
            </div>
        </div>
        <div class="d-flex flex-row bg-info">
            <div class="flex-grow-1">
                <p class="text-white p-3">
                    Visit us at <a href="https://www.geeksforgeeks.org/"
                    class="text-white">www.geeksforgeeks.org</a
                    to access our vast repository of knowledge. 
                    Follow us on social media for the latest 
                    updates and coding tips.
                </p>
            </div>
        </div>
        <div class="d-flex flex-row bg-danger">
            <div class="flex-grow-1">
                <p class="text-white p-3">
                    GeeksforGeeks is committed to providing 
                    high-quality educational content to help 
                    individuals succeed in the field of 
                    computer science and programming.
                </p>
            </div>
        </div>
        <div class="d-flex flex-row bg-secondary">
            <div class="flex-grow-1">
                <p class="text-white p-3">
                    Our mission is to make learning accessible 
                    and enjoyable for everyone. Join us on this 
                    exciting journey of discovery and 
                    self-improvement.
                </p>
            </div>
        </div>
    </div>
    <script src=
    </script>
</body>
  
</html>


Output:

Screenshot-2023-09-30-at-09-04-58-Bootstrap-5-Example-min-min



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads