|
Bootstrap is a framework that is suitable for mobile-friendly web development. It means the code and the template available on Bootstrap apply to various screen sizes. It is responsive for every screen size.
A Flexbox container with scrollable content typically involves using the flex utility classes to create a flexible container and then applying some basic classes to enable scrollable content.
ApproachTo create a Flex Box container with scrollable content:
- Add the
d-flex, flex-column utility classes to the container and also set its any height like 25vh (height: 25vh;), etc. - Then to make the Flexbox container scrollable, use the
overflow-y: auto; to ensure that a vertical scrollbar appears when the content exceeds the height.
Syntax<div class="col-12 d-flex flex-column h-25">
<div class="flex-grow-1 overflow-auto"
style="height: 50vh; overflow-y: auto">
...
</div>
</div> Example 1: Demonstration of usage of a flexbox container with scrollable content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<main class="container">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">
How to create Flex Box Container
with Scrollable Content in Bootstrap 5?
</h2>
<div class="container-fluid">
<div class="row">
<div class="col-12 d-flex flex-column h-25">
<div class="flex-grow-1 overflow-auto"
style="height: 50vh; overflow-y: auto">
<p>
GeeksforGeeks offers the Freelance Technical
Content Writing opportunity for all those
individuals who have some good article writing
skills and at the same time are knowledgeable
enough to write about a particular topic or domain.
This will not only help you in
showcasing and enhancing your technical writing
skills to the world but will also reward you
with some good remuneration and other
worthwhile benefits.
</p>
<p>
GeeksforGeeks offers the Freelance Technical Content
Writing opportunity for all those
individuals who have some good article writing skills
and at the same time are knowledgeable
enough to write about a particular topic or domain.
This will not only help you in
showcasing and enhancing your technical writing skills
to the world but will also reward you
with some good remuneration and
other worthwhile benefits.
</p>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</main>
</body>
</html>
Output:
Example 2: Demonstration of the usage of a flexbox container with image scrollable content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<main class="container">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">
How to create Flex Box Container with
Scrollable Content in Bootstrap 5?
</h2>
<div class="container-fluid">
<div class="row">
<div class="col-12 d-flex flex-column h-25">
<div class="flex-grow-1 overflow-auto"
style="height: 50vh; overflow-y: auto">
<p>
GeeksforGeeks is a leading platform that
provides computer science resources and coding
challenges for programmers and technology
enthusiasts, along with interview and exam
preparations for upcoming aspirants.
With a strong emphasis on enhancing coding skills and
knowledge, it has become a trusted destination
for over 12 million plus registered users
worldwide.
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
alt="gfg"
class="w-50 d-block mx-auto">
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</main>
</body>
</html>
Output:
|
