How to create Flex Box Container with Scrollable Content in Bootstrap 5?
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.
Approach
To 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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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" > w3wiki </ 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 > w3wiki 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 > w3wiki 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/bootstrap@5.3.0/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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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" > w3wiki </ 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 > w3wiki 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.w3wiki.net/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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > </ script > </ main > </ body > </ html > |
Output: