Ensuring Uniform Column Height in Bootstrap 4 - Preventing Buttons from Being Forced to the Bottom of

Using the Bootstrap 4 class 'h-100' to ensure equal height for all three columns, I encountered an issue where the buttons that were initially aligned to the bottom of each div are no longer in correct alignment. How can I maintain button alignment at the bottom while keeping the columns equal in height?

Before using h-100: https://i.sstatic.net/GoBT2.png

After applying h-100:

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

Snippet of my code:


		        	<!-- CSS code snippets -->
		        
		    

		    		<!-- HTML code snippets -->

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Utilizing bootstrap classes can easily achieve the desired effect.

Here are the necessary changes:

  1. Add the h-100 class to your cards
  2. Transform the cards column into flex containers by adding both the d-flex and flex-column classes
  3. Apply an automatic bottom margin using the mb-auto class to the text just before the button, ensuring the button is pushed to the bottom of the container

The outcome is displayed in the snippet provided below:

/* CSS code snippets */

<html>
<head>
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./style/index.css">
</head>

<body>
  <section class="threecol-teaser-cardWrap py-10">
    <div class="container">
      <h2>Title</h2>
      <div class="Benefits-Card">
        <div class="row">
          <div class="threecol-teaser-card col-lg-4 mb-6">
            <a href="">
              <div class="border border-primary h-100 d-flex flex-column">
                Your content here...
              </div>
            </a>
          </div>
          <div class="threecol-teaser-card col-lg-4 mb-6">
            <a href="">
              <div class="border border-primary h-100 d-flex flex-column">
                More content here...
              </div>
            </a>
          </div>
          <div class="threecol-teaser-card col-lg-4 mb-6">
            <a href="">
              <div class="border border-primary h-100 d-flex flex-column">
                Additional content here...
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Answer №2

When working with Bootstrap and making changes to the styling using CSS for main tags such as h1, h2, and div, it can potentially impact the original styling provided by Bootstrap. One way to address this is by assigning a unique id or class to each tag before making any modifications. Another approach is to utilize features in CSS that help avoid conflicts, like:

*{
   box-sizing: border-box;
}

To learn more about resolving legacy CSS conflicts when using Bootstrap, you can visit: Legacy CSS Conflicts

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

Enhancing Form Spacing with Bootstrap

I have been working on a form design, but I am now facing alignment issues. The problem is more noticeable on larger screens compared to smaller ones. The main issues I am encountering include extra spacing in the social links section even though there ar ...

csstwitter-bootstrapbootstrap-4

"Converting an HTML file to a Word file using PHP - a step-by-step

Help needed with converting an HTML file to MS Word using PHP code. Below is the code I am using: include("connection.php"); extract($_REQUEST); ob_start(); include("counties/$county_name/$file"); $html_content = ob_get_contents(); ob_end_clean(); header ...

javascriptphpjqueryhtml

Arranging an image and button within a column div row using Bootstrap

I'm encountering an issue with Bootstrap where I am trying to align the blue buttons neatly below the image. Link to the image: img Here is a visual representation: https://i.sstatic.net/tB5mU.png This is the code snippet: <div class="row&q ...

htmlcssbootstrap-4

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...

javascriptjqueryhtmlcss

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...

javascripthtmljquerycss

Support the Cause with Paypal Contributions on Angular/Bootstrap Website!

I'm currently in the process of developing a website using Angular and Bootstrap for a non-profit organization that will facilitate donations through Paypal. On the platform, users will have the option to select their donation frequency (Weekly, Mont ...

htmlangularjspaypal

Ensure that the width of the checkbox label in HTML/CSS using Bootstrap remains consistent and fixed, regardless of

Seeking assistance for a bootstrap checkbox button behavior. Currently, the text on the button changes when clicked, but I would like to set a fixed width for the button regardless of the text length and center the text inside it after clicking. Any guidan ...

jqueryhtmlcsstwitter-bootstrap

Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width. ...

htmlcssreactjsgridbootstrap-5

Troubleshooting problems with spacing in CSS flexbox due to the gap property

Having some trouble with flexbox. The gap property is making the columns too wide when trying to create a simple 3 column row. I was under the impression that the gap value should not affect the width set. For example, using flex: 0 1 33.33% and gap 2rem ...

cssflexboxgrid

Creating a Simple HTML Table Using PHP Arrays

I attempted to create a simple PHP array table, but the output of my code did not meet my expectations. <?php $names = array ( 'First Name' => array('Alfre', 'Beka', 'Charlie'), ...

phphtml

When a Mui Button is clicked, it changes the color of all tabs instead of just the active

My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to ...

cssreactjsmaterial-ui

Turning off font ligatures in CSS (letter connections deactivation)

Typically, modern web browsers will automatically merge certain letter combinations, such as 'f' and 'i', into a single character known as a ligature. While this can enhance readability, it may not always align with a designer's pr ...

cssgoogle-chromefonts

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

jqueryhtmlcss

What is the best way to ensure that images on a webpage adjust to a maximum width without distorting smaller images?

I'm working on my website blog and I need to create a specific area for images at the top of my articles. I want these images to have a maximum width so they don't exceed a certain size, but I also want smaller images to remain unaffected. Curren ...

phphtmlcssimage

How to stop AngularJS onClick event from causing scroll to jump to top of

As I work on developing a website using Angular JS and Bootstrap, I encountered an issue with the hamburger menu button on my homepage. Whenever I scroll halfway down the page and click the hamburger icon, it automatically scrolls me back to the top of the ...

javascriptjqueryhtmlangularjs

What is the best way to adjust the width of the <span> element in an Angular application?

This snippet showcases a piece of HTML code. <div class="col-md-8"> <span class="label">Product Name</span> <span> <mat-form-field> <input matInput formControlName="productName"> </mat-form ...

htmlcssangular

Ways to condense a text by using dots in the middle portion of it

How can I dynamically shorten the text within a container that varies in width? The goal is to replace the strings between the first and last words with dots so that it fits within the container. For example, Sydney - ... - Quito. It should only replace wh ...

javascripthtmlcss

Flickering of image in JavaScript when mouse is hovered over and removed

I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...

javascripthtml

Run a script on a specific div element exclusively

Up until this point, we have been using Iframe to load HTML and script in order to display the form to the user. Now, we are looking to transition from Iframe to DIV, but we are encountering an issue with the script. With Iframe, the loaded script is onl ...

javascripthtmliframe

Captivating captions for captivating visuals. Pictures don't conform to a linear arrangement

As someone who is new to website creation, I am currently working on adding a CSS effect where a popup-text appears when an image is hovered over. I want to create a row of images for the popups by using an unordered list. However, I'm facing a proble ...

css