Increase the height of the jumbotron to span the entire height of the column

Working with bootstrap 4.0.0, the code snippet below showcases my current setup:

<div class="container">
<div class="row">

<div class="col-md-4">
  <div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
    <h5>Title</h5>
    <p style="font-size:24px;">text text text</p>
    <button type="button" class="btn btn-primary"> Click me </button>
  </div>
</div>

... repeated multiple times

</div>
</div>

The goal is to create a grid layout with rows of jumbotrons in sets of three. However, I am encountering issues trying to make the jumbotrons stretch vertically to occupy 100% of their respective row's height while maintaining individual heights for each one. The desired layout has the title and paragraph aligned at the top, and the button positioned at the bottom of each jumbotron.

What steps can be taken to achieve this design? Appreciate any guidance provided. Thank you!

Answer №1

Implement the flexbox utilities for jumbotrons.

<div class="col-md-4">
     <div class="jumbotron mt-3 h-100 d-flex flex-column align-items-start" style="padding: 0.6em 1.6em;">
          <h5>Title</h5>
          <p style="font-size: 14px;">text texttext</p>
          <button type="button" class="btn btn-primary mt-auto"> Click me </button>
     </div>
</div>

  • h-100 - ensure jumbotron fills the height of column
  • d-flex flex-column - utilizes display:flex to stack content vertically in jumbotron
  • align-items-start - aligns content along the left side
  • mt-auto - aligns content at the bottom

Related: Bootstrap 4 cards - align content at the bottom

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 align two buttons side by side on a webpage using only HTML and CSS?

Can you help me figure out how to align two buttons next to each other with some space between them using only css and html? If you take a look at my html code and css code, you'll see that the two buttons are not aligned properly. * { margin: 0 ...

Change the visibility of a div's content when a radio button is selected with only CSS

When the radio buttons are on the same div level as "content1" and "content2", it works properly. But how can I make it work if I move the radio buttons to another div outside of the "second" div? For example, if toggle1 is checked then content1 should be ...

Ways to center card components (rmwc) horizontally within a React application

Within my parent component: { this.state.projectList.map(data => <Item details = {data}/>) } Inside the child component Item render() { return ( <div style={{'width':'100%', 'tex ...

Modifying the background color of a specific section on a Bootstrap website

If you visit a bootstrap website like www.teachyourselfpython.com, you will notice that the welcome and resources sections have a white background color. I've been trying to figure out how to change this white background to a light grey specifically f ...

Width of the `div` element is expanding

I'm encountering an issue where a div container is automatically stretching to the full width of the page, instead of adjusting to fit the content within it. Below is the HTML code snippet: <!doctype html> <html> <!-- Head --> <h ...

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

What is the best way to eliminate the gap beneath v-app-bar in Vue.js?

Is there a way to eliminate the space below v-app-bar? the header segment User_Header.vue <template> <v-app id="user_header"> <v-app-bar app color="#8a0303" dark> <h1>this is app bar</h1> & ...

Firefox displaying bullet points incorrectly when list item includes a button

In my testing, I've come across an interesting issue. When a button is a direct descendent of a list item and its inner text wraps to multiple lines, I have noticed that on Firefox the bullet point lines up with the last line of the text instead of th ...

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

Error in Bootstrap v4.0.0-beta.2 causing issues with ordering

There are two col-lg-5 divs in my layout. I am trying to use the Bootstrap order-* class in v4.0.0-beta.2 to change the order of the second div to be first on mobile devices. <div class="col-lg-5 col-12 order-col-12"> [first_div] </div> & ...

Narrow block with horizontal scrollbar

I am looking to create a grid filled with numerous photos in a row. However, due to the limited width of the web page, I need to implement horizontal scrolling. Check out my solution here: http://jsfiddle.net/49REZ/ HTML <div class="wrapper"> ...

When you hover over one box, watch as another magically vanishes

How can I make one div disappear by hovering over another? When I use the code .icon:hover + .info { display:none), it just displays that div underneath instead of making it disappear. I'm not sure if the placement of the divs in the HTML is affectin ...

What causes my animation to “reset” upon adding a new element using innerHTML?

One of the functionalities on my webpage involves a script that inserts a div called "doge" using innerHTML when a button is clicked. Additionally, there is a CSS keyframes animation applied to another div on the same page. However, whenever the button is ...

Removing outlines on <p> <a> or <div> elements with Ionic and Angular seems to be a challenging task

Hey there, I’m currently working on my application which includes a login page. I've implemented a “Forgotten password ?” link, but no matter what I try, like using .class and :focus {outline: none}, I still see a yellow square around the item. ...

Creating a horizontal line with text centered using Angular Material's approach

Implementing Angular Material, my objective is to design a horizontal line with a word positioned in the center. Similar to the one showcased here. I experimented with this code, achieving a close result, but I aim to align the lines vertically to the mid ...

Debugging ImageMapster: troubleshooting jQuery/HTML problems

I am currently experiencing difficulties with the implementation of the jquery plugin known as ImageMapster. To assist in troubleshooting, ImageMapster has provided a demonstration through jsfiddle which can be accessed here: http://jsfiddle.net/nYkAG/396/ ...

The Vue.js component exclusively displays background colors selected from a limited range of Tailwind CSS colors

I am currently working with a card component: <template> <div class="z-50 flex w-[15vw] flex-col items-center justify-center gap-5 rounded-md border-2 border-gray-300 bg-[#f3f3f3] p-5 transition-all duration-300 hover:scale-105 hover:fo ...

What is the secret to the lightning speed at which this tag is being appended to the DOM?

Have a look at this concise sandbox that mirrors the code provided below: import React, { useState, useEffect } from "react"; import "./styles.css"; export default function App() { let [tag, setTag] = useState(null); function chan ...

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

Deactivate toggle effect by clicking on a different link

My existing JavaScript code changes the background color of a link when it is clicked: $(".button").click(function(){ $(this).css('background-color', '#555'); }); While this functionality works, I am looking to have the color tog ...