Ensure the Bootstrap 4 row is placed at the bottom of the container with a height of 100%

Despite trying numerous approaches, I am still unable to achieve my desired outcome.

The issue lies within a container with min-height: 100px; and height: 100%. Inside this container are two rows, as depicted in the image below. My goal is to have row 2 positioned at the bottom of the container

https://i.sstatic.net/9SBqW.png

Below is the code snippet:

<div class="container-fluid full-height">
    <div class="row"> <!-- ROW 1  -->
        <div class="col-12 item-title bg-info">
            <h2> Fortress </h2>
        </div>
        <div class="col-12 item-description bg-danger">
            Niš Fortress is a fortress in the city of Niš, Serbia. It is a complex and important cultural and
            historical monument. It rises on the right bank of the Nišava River, overlooking the area inhabited
            for longer than two millennia.

            It was protected by law in May 1948 as it was declared a cultural site of great significance. The
            current condition of the fortress lists it as one of the best preserved fortifications of this kind
            in Serbia as well as on the Balkan Peninsula.
        </div>
    </div>
    <div class="row"> <!-- ROW 2  -->
        <div class="col-xl-6 col-md-8 col-sm-12 bg-info">
            <div class="container-fluid no-lf-padding">
                <div class="row">
                    <div class="col-6">
                        Work hours:
                    </div>
                    <div class="col-6">
                        Monday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Tuesday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Wednesday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Thursday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Friday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Saturday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Sunday 12:00 - 16:00
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
            <div class="container-fluid no-lf-padding">
                <div class="row">
                    <div class="col-12">
                        Address
                    </div>
                    <div class="col-12">
                        Phone
                    </div>
                    <div class="col-12">
                        Website
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the CSS styles applied:

.no-lf-margin {
    margin-left: 0;
    margin-right: 0;
}

.no-lf-padding {
    padding-left: 0;
    padding-right: 0;
}
/*STYLING FOR THE CONTAINER*/
     .full-height {
        min-height: 100%;
        height: 100%;
    }

I've attempted the following:

  • adding align-items-end to row 2, however, there was no change in the layout.
  • creating a 
    <div class="container align-self-end"> CONTENT HERE </div>
    , and applying align-self-end, but saw no impact on the positioning.

What could I be overlooking in my implementation?

Access the JSFiddle link here: https://jsfiddle.net/a1e0htsw/

csstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired layout, make sure to apply the flex-fill class along with flexbox properties like d-flex flex-column on the container element...

    <div class="container-fluid full-height d-flex flex-column">
        <div class="row">
            ..
        </div>
        <div class="row align-items-end flex-fill">
            <div class="col-xl-6 col-md-8 col-sm-12 bg-info">
                ..
            </div>
            <div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
                ..
            </div>
        </div>
    </div>

Link to example code here

Answer №2

To accomplish this layout using flex, you can structure it like the following example:

<div class="container">
  <div class="section-one">
  </div>
  <div class="section-two">
  </div>
</div>

Then, apply the necessary CSS styles:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  height: 100%;
}

Answer №3

Initially, the body should occupy all the available space within the viewport (100vh). When utilizing Bootstrap, you can incorporate these classes into the container

h-100 d-flex flex-column justify-content-between

If not using Bootstrap:

.container-fluid.full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

The addition of align-items-end in the second row isn't effective because it pertains to child elements rather than the element itself.

Here's the code:

body {
  height: 100vh;
}

.no-lf-margin {
    margin-left: 0;
    margin-right: 0;
}

.no-lf-padding {
    padding-left: 0;
    padding-right: 0;
}
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        
        <div class="container-fluid h-100 d-flex flex-column justify-content-between">
            <div class="row">
                <div class="col-12 item-title bg-info">
                    <h2> Fortress </h2>
                </div>
                <div class="col-12 item-description bg-danger">
                    Niš Fortress is a fortress in the city of Niš, Serbia. It is a complex and important cultural and
                    historical monument. It rises on the right bank of the Nišava River, overlooking the area inhabited
                    for longer than two millennia.

                    It was protected by law in May 1948 as it was declared a cultural site of great significance. The
                    current condition of the fortress lists it as one of the best preserved fortifications of this kind
                    in Serbia as well as on the Balkan Peninsula.
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6 col-md-8 col-sm-12 bg-info">
                    <div class="container-fluid no-lf-padding">
                        <div class="row">
                            <div class="col-6">
                                Work hours:
                            </div>
                            <div class="col-6">
                                Monday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Tuesday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Wednesday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Thursday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Friday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Saturday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Sunday 12:00 - 16:00
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
                    <div class="container-fluid no-lf-padding">
                        <div class="row">
                            <div class="col-12">
                                Address
                            </div>
                            <div class="col-12">
                                Phone
                            </div>
                            <div class="col-12">
                                Website
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer №4

To make the layout work properly, start by applying display:flex to the container element and then add flex-grow: 1; to the first row.

.main-container
        {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .row
        {
            padding: 2rem;
            color: #fff;
        }

        .section1{
            background-color: #f00;
            flex-grow: 1;
        }

        .section2{
            background-color: #00f;
        }
<script src="https://example.com/jquery.min.js"></script>
    <script src="https://example.com/popper.min.js"></script>
    <script src="https://example.com/bootstrap.min.js"></script>
    
    <div class="container-fluid main-container">
        <div class="row section1">
            Insert your content here.
        </div>

        <div class="row section2">
            More content goes here.
        </div>
    </div>

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

Displaying Image from Jquery Ajax Response

I have a PHP script that can resize images with specified dimensions by passing the width and height as variables like so: resize.php?width=100&height=200. The content-type of this PHP script is set to image/jpg. Additionally, I have an HTML page wher ...

phpjquerycssajax

The JScolor Color Picker has a slight misalignment

I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...

javascripthtmlcssjscolor

Attempting to display a brief description when hovering over a particular project image

My goal on is to display a description when hovering over a portfolio image by setting the opacity to 1. However, this functionality seems to not be working. .description { display: block; opacity: 0; text-align: left; height: 130px; padding- ...

htmlcss

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

javascriptcsstwitter-bootstrapz-indexbootstrap-tour

Struggling to successfully toggle the visibility of items

I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info cont ...

javascriptjqueryhtmlcss

Implement vertical navigation arrows in a Bootstrap accordion using JavaScript

Snippet of my HTML code: <div class="panel" style="margin-left: -15px;"> <div class="panel-heading"> <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysi ...

javascripthtmlbootstrap-4accordion

Modify the currently selected color in a multi-select menu by editing the option tag

Why does the selection option value turn blue, but then become a faint grey when clicking on anything else on the page? Can these colors be changed, especially the faint grey for better accessibility? I've experimented with various CSS approaches, bu ...

htmlcsszurb-foundation

Change the Label in a TextField Component with Material UI

How do I customize the label of a TextField and prevent a grey background color from appearing after selecting an item in Material UI? To view the solution, please visit this CodeSandbox link: CLICK HERE Label Customization Issue: https://i.sstatic.net/1 ...

cssreactjsmaterial-uijss

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

javascripthtmlcssvue.js

The Drop-down menu with carousel in Bootstrap is experiencing difficulties displaying its sub-menu items

I am currently facing an issue where the sub-menu items are hidden behind the content in a bootstrap carousel. Despite everything else working fine, this particular problem is causing a headache. JSFiddle: https://jsfiddle.net/Saneesh/pwmyvsw6/65/ Is th ...

jqueryhtmlcsstwitter-bootstrapcarousel

CSS to resolve HTML alignment problems

I am new to HTML and CSS, trying to practice formulating a few things but my efforts are proving futile. Below is the code and images for your reference. I would appreciate your opinion. .container { display: block; width: 200px; height: 120px; } ...

htmlcss

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly i ...

javascriptcssfunctionhtml-select

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

javascripthtmlcssweb

Adjusting the thickness of the CSS cursor line upon entering an input field

Having an image as the background for an input field has been causing issues for me. Although I can adjust the line-height and font-size easily, the cursor line appears outside of the background image when clicking inside the input field. Is there a speci ...

phpcss

Enhance class names by utilizing addEventListener within the useEffect hook

I'm having trouble with creating a hamburger button menu. The issue I'm facing is that when I click the button, nothing happens. Even though I can log something in the toogleHamburger function and see it in the console, the styling does not chang ...

cssreactjssass

Ensure that the headers of the table are in perfect alignment with the

Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...

htmlcss

The Bootstrap 5 Accordion Content is not Showing Up

In my current project in vscode, I am using Bootstrap 5 to develop a website. Specifically, I am working on creating an accordion feature with Bootstrap 5. However, I encountered an issue where the accordion body does not show up when clicking on the acc ...

htmlcssvisual-studiofrontendbootstrap-5

Comparing Angular2 Material and Bootstrap: Which one is the better

Forgive me if this sounds like a basic question, but I could really use some guidance. I'm in the process of developing a new application and I can't decide between using angular2 material or bootstrap. ...

angularsassangular-materialbootstrap-4

Arrow smoothly sliding beneath the selected tab in the active menu

Here is a reference picture. https://i.sstatic.net/wsp6R.png I am trying to create a slide effect for my arrow when clicking on different menu items. The arrow should move over the active menu item. By default, the arrow should point to the active menu. ...

javascriptandroidjqueryhtmlcss

Setting the vertical navbar height to match the footer in a HTML layout

When the screen size is larger than 768px, my layout looks like this: https://i.sstatic.net/nE4Qp.png However, I want the vertical navbar height to extend to the footer even when resizing the screen. This is the desired layout: https://i.sstatic.net/z98Uf ...

htmlcssnavbar