Bootstrap: how to retain content height

I have created this layout using Bootstrap

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
      <div class="col-md-2 leftsidebar">left</div>
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-12 header">header</div>
        </div>
        <div class="row">
          <div class="col-md-12 content">content</div>
        </div>
        <div class="row">
          <div class="col-md-12 footer">footer</div>
        </div>
      </div>
      <div class="col-md-2 rightsidebar">right</div>
    </div>
  </div>

I always ensure that the content fills out the entire page, here is a screenshot of the layout:

https://i.sstatic.net/cOijG.png

htmlcssbootstrap-4

Answer №1

Check out the following code snippet by running it in a full page:

    html,body{
        height:100%;
    }
    .leftsidebar{
    background:orange;
    }
    .rightsideba{
    background:green;
    }
    .vh-100{
        height: 100vh!important;
    }
    .footer{
        position: absolute;
        bottom: 0;
        width: 100%;
        background:red;
    }
    .content{
    background:skyblue;
     height: calc(100% - (30px));
    }
    .vw-100{
    width:100vw;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      
     <div class="container-fluid  h-100">
    <div class="row">
      <div class="col-md-2 leftsidebar  vh-100">left</div>
      <div class="col-md-8">
        <div class="row header">
          <div class="col-md-12  h-100">header</div>
        </div>
        <div class="row content">
          <div class="col-md-12">content</div>
        </div>
        <div class="row footer">
          <div class="col-md-12   h-100">footer</div>
        </div>
      </div>
      <div class="col-md-2 rightsideba  vh-100 vw-100">right</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

Toggling CSS in Vue with a button and a checkbox

I'm currently working with VueJS and here is the CSS code I have: .button-css { align-items: center; background-color: var(--azure-radiance); border-radius: 30px; display: flex; height: 50px; min-width: 200px; padding: 0 60px; } .opensans-bold ...

cssvue.jscheckboxtogglebutton

Obtaining multiple divs with identical class names within a specific container

If we have the following HTML code: <div id='m1'> <div class="c"></div> <div class="c"></div> <div class="c"></div> </div> <div id='m2'> <div class="c"></div> <div ...

javascripthtml

What is the best way to continuously add items to a div until their heights are equal?

In my layout, I have two divs positioned next to each other. Typically, the left div displays n+2 items while the right div displays n items. The value of n changes depending on the category and is already set. However, there are instances where certain ...

javascriptjquerycssajax

Implement a single CSS menu across various HTML pages

I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...

htmlcss

Develop a selection tool based on certain column information - utilizing JavaScript

I'm currently working on a table with a large amount of data, and I'd like to implement a select option for filtering. While I have successfully added the filter with the select element, my concern is how to dynamically populate the options witho ...

javascriptjqueryhtml

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

As a newcomer to React, I've been attempting to incorporate Font Awesome icons into my secondary navigation bar. Despite using switch-case statements to iterate through each element, all the icons ended up looking the same, indicating that only the de ...

javascripthtmlreactjsxmlfont-awesome

Consistent vertical alignment throughout the entire row of content

Here is the code snippet I have: <div class="card text-white bg-primary"> <div class="card-body pb-0"> <div class="container h-100"> <div class="row"> <div class="col-md-8"> <h5 cl ...

bootstrap-4

Having issues with column offsetting in Bootstrap v4.0.0-beta

While using Bootstrap 4 Beta (Bootstrap v4.0.0-beta), I encountered an issue with offsetting columns. Previously, I used offset-md-* and it worked fine. However, this feature has been removed in BS4 Beta as per the documentation. The new method suggested i ...

csstwitter-bootstrapbootstrap-4

Passing dynamically loaded parameters to a function during dropdown value selection in Angular 2

Could you please review if I am passing the parameters correctly in the li tag's click function of the updateId method? The console errors only point to that line. This is my app.component.html code: <div class='form-group' style="width ...

javascripthtmltwitter-bootstrapangular

Problem encountered with HTML table formatting

I am struggling to create a table in HTML Click here for image Here is the code I have tried: <table> <tr> <th class="blue" colspan="3">3</th> <th class="orange " rowspan="2">2</th> <th class="blu ...

htmlcsshtml-table

Nested click jQuery with draggable elements

After taking advice from @amphetamachine in this thread, I was able to successfully manage nested clicks using jQuery. However, the drag feature that was previously functioning perfectly has now stopped working since I implemented the delegates. The main ...

jqueryhtmljquery-ui

Retrieving Dropdown Values based on Selection in Another Dropdown

On my website, there are two dropdown lists available: 1) One containing Book Names 2) The other containing Links to the Books. All data is stored in an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <BookDetail> <boo ...

javascripthtmlajaxxmlxslt

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

javascriptcss

Searching for a class and implementing a style using jQuery: a beginner's guide

i found this neat example on jsfiddle of an accordion created using only css3, no javascript involved. HTML: <div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="radio" checked /> <label for= ...

jquerycssheightjquery-ui-accordion

Accessibility - Tabs count not being recognized by screen readers

I am facing an issue with making Bootstrap tabs accessible for screen readers. Ideally, the tabs should be read as tab 1 of 1, tab 2 of 2, etc. However, with Bootstrap tabs, all items are read as tab 1 of 1. When I assign the role="tab" to the li items, th ...

bootstrap-4accessibilityuiaccessibilitynvda

Centering Text in CSS and HTML

Today I am pondering over how to align text horizontally on my website. The layout of us.mineplex.com's forums, shop, and title is perfectly aligned in a horizontal manner. I have tried to figure it out on my own but need some help. Thank you. CSS: ...

htmlcsstextalignment

FancyBox: Can You Achieve the Same Scrolling Effect with HTML Fragments Instead of Images?

Is it possible to display HTML fragments instead of images with the same scrolling effect (when using the next() method)? I am struggling to figure out how to make this work. Currently, I am able to display a single HTML fragment using fancybox: $.fancyb ...

javascripthtmlfancyboxfancybox-2

What is the functionality of the CSS switch button?

I'm curious about how the cool turn on/off switch button actually works. Take a look at for reference. I'm interested in implementing a prevention check to confirm whether the user truly wants to switch the button. Here's a snippet of the ...

jquerycss

Dynamic grid arrangement showcasing cells of varying heights

I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...

htmlcssgrid-layout

Having trouble with CSS Overflow:hidden not functioning properly on my slider

I have successfully created a 100% width slide using jQuery. However, I am facing an issue where the horizontal overflow is not being hidden. Here are my codes: HTML, <div class="slide"> <ul> <li><img src="inc/imj/slide/1 ...

htmlcss