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