Equalizing Grid Heights in Twitter Bootstrap

I need to achieve the same height for my sections using Bootstrap 4 but I want only the content <div class="content"> to be enlarged, not the header and footer.

section {
  background: #ccc;
  border: 1px solid #000
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
</div>

Could you assist me with this task?

htmlcsstwitter-bootstrap

Answer №1

section {
  background: #ccc;
  border: 1px solid #000;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-content: space-between;
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}

.content {
  flex: 1 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
</div>

Answer №2

Is this the kind of thing you're looking for?

.container {
  min-height: 150px;
  height: 150px;
}


article {
  background: #ccc;
  border: 1px solid #000
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}

.container {
  min-height: 150px;
  height: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <article>
      <header>
        Title
      </header>
      <div class="container">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </article>
  </div>
  <div class="col-3">
    <article>
      <header>
        Title
      </header>
      <div class="container">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </article>
  </div>
  <div class="col-3">
    <article>
      <header>
        Title
      </header>
      <div class="container">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </article>
  </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

What could be causing OnChange to malfunction within Formik?

Formik in React is giving me trouble while working on a dummy app. When I set the value prop for the input boxes, I am unable to type anything. However, if I remove the value props, I can type but it doesn't reflect in the values when submitting. Tak ...

htmlreactjsformik

Obtaining HTML data with ajax within a WordPress post

Greetings! I've been putting together a website and I'm eager to include a unique timeline in each of my posts. I'm utilizing WordPress for this project. However, since the timeline I want to insert will vary from post to post, I am unable t ...

javascriptphphtmlcssajax

I am attempting to extract data from the website by utilizing the correct CSS selectors, however, I continue to receive results suggesting that the element is not present

Struggling to create a bot for my own services, but encountering crashes when trying to run it. login_button = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "//div[@class='loginRegisterButtons sb- ...

pythonhtmlcssseleniumwebdriver

Delayed Page Update: Click Event Doesn't Execute Correctly Without JQuery

I'm a beginner in JavaScript and unable to use JQuery I have a table and I want to highlight the selected row on the click event. At the same time, I need to change the value of an input field. However, when I click on a row, the highlight effect get ...

javascripthtml

Tips on managing scrollbar behavior in Angular UI Grid

In my current project, I am utilizing Angular UI Grid. The grid automatically resizes itself so that all columns fit within a specific div horizontally. While this feature works well initially, it becomes problematic when there are more rows than can fit ...

cssangularjsangular-ui-grid

What is the technique for linking to a different WordPress PHP file using a href?

I have a question regarding working with WordPress. I am using Stacks, a blank theme to convert an HTML template to WordPress. I need to create a hyperlink or button on a landing page that redirects to another PHP file within my website directory (e.g., lo ...

phphtmlcsswordpresswordpress-theming

Hover function not functioning properly

I can't figure out why this hover effect isn't working, there doesn't seem to be a negative z-index or anything like that. At most, it just flashes on hover; .menu{ border-radius: 50%; width: 100px; height: 100px; background: white; box-sha ...

csshover

Deciphering HTML encoding for text fields

As I transition from the Microsoft stack, specifically WPF, to HTML5, I apologize for any beginner-level questions. Today's topic is HTML encoding and decoding. Imagine an HTML5 application making AJAX calls to a C# backend using HTTP. The server al ...

javascriptjqueryhtmlencodingtextbox

Spinner loading - stays centered on screen even when scrolling up or down

<div id="Dvloading" style="float: left;"> <i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i> </div> This code displ ...

javascriptjqueryhtmlcssasp.net-mvc

How to Use jQuery Slice to Display the Top N Items from a Dropdown Menu

How can I display only the top 10 results from multiple UL lists in my navigation? The code snippet provided below currently works for the first list, but how can I extend this functionality to all of the lists? $(document).ready(function() { var elem ...

javascriptjqueryhtmltwitter-bootstrapslice

The v-select menu in Vuetify conceals the text-field input

How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...

javascriptcssvue.jsvuejs2vuetify.js

Extract content from an HTML element and transfer it to PHP

Alright, listen up. I've got a task at hand where I need to fetch some information from my database by calling a PHP page through a link (<a href='name.php'>). Let's just say the code is speaking louder than my words: <?php ...

phphtmlmysql

Utilizing Jquery Effectively to Dynamically Alter Images Based on Ids

HTML Section <div class="features-section"> <div class="container"> <div class="row"> <div class="feat-heading text-center"> <h3>Features</h3> ...

jqueryhtmlimagecsshover

Utilize the return function in a separate PHP file

I wanted to create a basic login form as a way to dive into learning php. After setting up the form, I wrote a function that sends a query to a MySQL database to fetch the username and password (stored in md5 encryption) for comparison with user input. T ...

phphtmlmysql

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

javascriptphphtmlajax

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...

javascripthtmlexpress

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...

javascripthtmlcssgoogle-mapsgoogle-maps-markers

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

jqueryhtmlcss

Using a color as a substitute for a background image on mobile devices

Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width? In the snippet below, the media query "only screen and (max-width: 600px)" works if the top bod ...

htmlcss