Creating a vertically centered scrollable <div> with Bootstrap 4: A step-by-step guide

My goal is to create a webpage layout like the one shown below:

https://i.sstatic.net/xn7UE.jpg

In this design, the red box represents a scrollable div whose size adjusts according to the content. The main background featuring the man and the navbar should remain fixed and non-scrollable.

Here is the code I am currently using:

<body id="header">

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: black;">
  <a class="navbar-brand" style = "font-weight: 600; font-family: Arial, Helvetica, sans-serif;" href="#">Dr. Lim Wee Chai</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" style = "font-weight: 600; font-family: Arial;" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Philosophies & Values</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Lifestyle</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Top Glove</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Future Vision</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style = "font-weight: 500;" href="#">Videos</a>
      </li>
    </ul>
  </div>
</nav>

<br>

</body>

Looking for assistance to implement this design!

cssbootstrap-4

Answer №1

To achieve this layout, CSS3 provides useful flex properties. Bootstrap 4 effectively utilizes these properties in its flex utility classes. One simple way to set up this layout is shown below:

<div class="container d-flex h-100">
    <div class="my-component d-flex mx-auto align-self-center flex-column">
        <!-- place scrollable content here -->
    </div>
</div>

This layout example is showcased in this fiddle.

Let's dissect the purpose of each class:

  1. Ensure html, body have height: 100%; to create a full-height body, allowing content to be vertically centered within.
  2. .container or .container-fluid with .d-flex and .h-100 will expand to fit the screen's height.
  3. .my-component is set with height: 50vh and width: 50vw; to make it responsive, along with overflow-y: auto; for scroll functionality. Adjust dimensions as needed with media queries.
  4. .my-component also includes .d-flex for .mx-auto (horizontal centering), .align-self-center (vertical centering), and .flex-column for proper content alignment.

All specified utility classes should be used together for this setup to work effectively. Understanding your "wrapper" content may require additional customization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to trigger a modal to open automatically after a 3-second delay?

code: <script> $(document).ready(function() { setInterval(function() { $('#contact').modal(); }, 3000); }); </script> html code: <a href="#contact"><h4><i class="fa f ...

phphtmlcss

Vertical alignment with flexbox not functioning properly in Internet Explorer 11

I am attempting to use flex to center an icon within two divs. Below is the code snippet: .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; } .div-2 { margin: auto; } i { color: #ffffff; } &l ...

htmlcssinternet-explorerinternet-explorer-11

Modify the hue of the div as soon as a button on a separate webpage is

Looking for assistance with a page called "diagnosticoST" that contains four buttons (btn-institucional, btn-economico, btn-social, btn-natural). These buttons have different background colors until the survey inside them is completed. Once the user comple ...

javascriptjqueryhtmlcss

Customize the background color of a particular select element within an array of dynamically created select elements

I've been experimenting with jQuery to dynamically adjust the background color of a select element based on the chosen option. The select elements are being generated using the following code: while ($qrow = $qquery->fetch(PDO::FETCH_ASSOC)) { ...

phpjqueryhtmlcss

Learn the art of closing an AngularJS accordion automatically when another accordion is opened within an AngularJS application

I have encountered an issue with the AngularJS accordion functionality. It seems that when I have multiple accordions, such as accordion-1, accordion-2, and accordion-3, they all open simultaneously if clicked on individually. My main concern is: How can ...

javascriptcssangularjstwitter-bootstrap

When I open my website in a new tab using iOS and Chrome, the appearance of the absolute element is being altered

I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...

javascripthtmlcss

Adjust the size of the <textarea> to match the height of the table cell

Below is the code I am using to generate a table containing an image along with a <textarea>: <table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\ <col width="455"> <col width="230"> ...

javascripthtmlcsshtml-tabletextarea

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

htmlcssreactjshovermouseleave

When utilizing state in ReactJS to modify the color of my button, the change does not take effect on the first click. How can I troub

Whenever I click the button that routes to different locations via an API, the route works fine but the button color doesn't change on the first click. To address this issue, I implemented the useState hook and CSS to dynamically change the button co ...

cssreactjsbuttonreact-hooksbackground-color

Trouble with Bootstrap CSS buttons: color consistency problem persists

I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...

htmlcsstwitter-bootstrapbootstrap-4

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

Overlap of images on a responsive CSS page

I'm venturing into the world of responsive design for the first time, but I seem to be facing some challenges. In the initial screenshot, you can see that the tower image is overlapping a div and I can't figure out where I went wrong. Check out t ...

htmlcssresponsive-designcss-float

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

htmlcsstwitter-bootstraptwitter

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

htmlcssfirefoxhtml-table

CSS classes designed to mimic JavaScript object attribute-value pairs

I stumbled upon some interesting css class-value combinations within HTML tags. It seems like a specific JavaScript code is interpreting this, but it's something I haven't encountered before. I came across this on www.woothemes.com/flexslider/ (y ...

javascriptcss

The DataGrids effortlessly expanded to accommodate their parents without the need for a horizontal scrollbar, showcasing their full capacity

After conducting numerous tests on simpler models, I have come to realize that the display of DataGrids Pro has been altered in MUI v6, rather than being a result of something I had broken initially. My workplace utilizes multiple DataGrids with columns h ...

cssmaterial-uimui-x-data-gridmui-x

The issue with Three.js responsive canvas is that it fails to properly adjust the size of the

I'm currently working on a threejs basic scene and attempting to create a responsive canvas for a full-screen experience. However, the mesh inside the scene is not resizing correctly as expected. Instead of remaining a cube, it distorts into a rectang ...

javascriptcsscanvasthree.jsresize

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

htmlcssoutlookhtml-email

What is the best way to achieve a horizontally compact layout in Bootstrap by centering the content?

I am looking to center my content on the page and maintain a close proximity between items within a div. However, with Bootstrap 5, when I resize the page wider, additional space is added which pushes the items apart. Is there a way to keep them compacted ...

javascripthtmlcssbootstrap-5

The positioning of the center element within a Bootstrap navbar is influenced by the width of the left element

I recently started using bootstrap 3 and I'm trying to align my navbar to the center. I managed to achieve this with the help of this method, which is working well. Now, my issue is that the width of my navbar-brand element is affecting the position ...

htmlcsstwitter-bootstrapcenter