Arrange the divs at the top and bottom of a Bootstrap 5 column

I am working with a Bootstrap 5 row that contains multiple columns. Each column consists of an image and a paragraph.

Since the images have varying heights, I am trying to align everything by:

  1. setting the child div to have a height of 100% using h-100
  2. aligning the image to the top using align-top
  3. aligning the paragraph to the bottom using align-bottom
<div class="row">
  <div class="mt-5 col text-center">
    <div class="h-100 border">
      <div class="align-top">
        <img class="img-fluid" src="example1.png" width="180">
      </div>
      <div class="align-bottom">
        <p>Paragraph 1</p>
      </div>
    </div>
  </div>
  <div class="mt-5 col text-center">
    <div class="h-100 border">
      <div class="align-top">
        <img class="img-fluid" src="example2.png" width="180">
      </div>
      <div class="align-bottom">
        <p>Paragraph 2</p>
      </div>
    </div>
  </div>
</div>

However, it seems like align-bottom is not having any effect. It's possible that align-top isn't either, but I haven't confirmed as the default alignment is at the top.

What could I be doing incorrectly?

csstwitter-bootstrapbootstrap-5

Answer №1

To achieve the desired layout, make sure to apply the Bootstrap classes listed below: 

flex-grow-1 d-flex justify-content-center align-items-end
. Here's how each class contributes:

  • flex-grow-1: Ensures that the text fills up any remaining space below the image,
  • justify-content-center: Centers the text horizontally,
  • align-items-end: Aligns the text to the bottom of its container.

Note: For demonstration purposes only, you can disregard the IDs id="img-1 and id="img-2.

Refer to the code snippet below for implementation details.

#img-1 {
  height: 200px !important;
}

#img-2 {
  height: 50px !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f445a4458">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eef0ec">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="row">
  <div class="mt-5 col text-center">
    <div class="h-100 border">
      <div class="align-top">
        <img id="img-1" class="img-fluid" src="example1.png" width="180">
      </div>
      <div class="align-bottom d-flex justify-content-center">
        <p>Paragraph 1</p>
      </div>
    </div>
  </div>
  <div class="mt-5 col text-center">
    <div class="h-100 border d-flex flex-column">
      <div class="align-top">
        <img id="img-2" class="img-fluid" src="example2.png" width="180">
      </div>
      <div class="align-bottom flex-grow-1 d-flex justify-content-center align-items-end">
        <p>Paragraph 2</p>
      </div>
    </div>
  </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

Creating and adding nested div elements with the power of JavaScript

My goal is to utilize JavaScript for updating the CSS layout as the webpage loads. Below is the code I have been working on: var container = 0; // Total UI Container var containerTitle = 0; // Title Container var article = 0; var articleTitle = 0; var ...

javascriptcsshtml

How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to ...

jquerycsshtmlbootstrap-4rich-text-editor

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs

What is the best way to handle my database identifier when I need to input the ID data to restore deleted information?

Here is the code for my controller: <?php namespace App\Http\Controllers; use App\Models\User; use App\Models\Datakaryawan; use Illuminate\Http\Request; use Illuminate\Support\Facades\DB; use Illu ...

phplaravelbootstrap-5

I'm having trouble with my inline list breaking when I try to add something to it. How can I fix this

I'm experiencing an issue where moving my mouse over any of the li's causes them to go out of place. How can I resolve this issue? Here is a demo: https://jsfiddle.net/z970pg6n/ ul { list-style: none; display: block; padding: 0; margi ...

htmlcss

What are the steps to properly centralize a "brief biography"?

I've been struggling to align my short bio on my webpage. I used Bootstrap to create a column layout with a picture and text, but I can't seem to center it properly. Various attempts were made, including using float: left and float: right, as we ...

htmlcsstwitter-bootstrap

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

htmlcssscroll

Synchronization issue between CSS style and Javascript is causing discrepancies

I am looking to avoid using jquery for simplicity. I have three websites that each page cycles through. My goal is to scale the webpages by different values. I attempted applying a class to each page and used a switch statement to zoom 2x on Google, 4x o ...

javascripthtmlcssiframe

How to align text to the left and right within a Bootstrap accordion

I am currently working on a Bootstrap accordion, and I have a specific layout in mind. I want to display text on both the left and right sides of the accordion header, right next to the arrow that expands and collapses the content: https://i.sstatic.net/d ...

htmlcsstwitter-bootstrapbootstrap-5

Having difficulty centering an image in HTML?

I've been struggling to get the image (logo) centered on the top bar! I've tried using align-self: center;, display:block;, but nothing seems to work. It feels like I'm missing something here! Click here for the codesandbox link to view the ...

htmlcss

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

javascripthtmlcsssvgicons

Creating a custom button to perfectly fit the contours of its content with Font Awesome 5

Can the shape of a button be altered to match its content? Specifically, I am using the "fa-trash-alt" icon and have a button with hover effects that I only want to apply to the icon itself rather than the entire button. Button: <button type='but ...

htmlcssbuttonfont-awesomefont-awesome-5

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow https://i.sstatic.net/wO5br.png To view my code, please visit: Cod ...

javascripthtmlcss

Using the Drupal Colorbox module with Internet Explorer

This problem has been driving me crazy! I'm struggling to make Colorbox show the borders correctly in IE7 (and even in IE6, but I'll settle for just IE7 at this point!). You can check out the issue here. When you click on a picture in the galler ...

cssinternet-explorerdrupalgallerycolorbox

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

javascripthtmlcssangulartypescript

Disabling the 'fixed navigation bar' feature for mobile devices

Here's a code snippet that I'm working with. It has the ability to make the navigation stick to the top of the page when scrolled to. HTML <script> $(document).ready(function() { var nav = $("#nav"); var position = nav.position(); ...

javascriptjqueryhtmlcss

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

Attaching a modal to an entity

I am currently working on binding a Knockout (KO) viewmodel to a Bootstrap modal, but it seems like I am overlooking a step to direct KO to fill in the input fields. Below is the current setup: The template for the modal: <script type="text/html" id= ...

javascriptjquerytwitter-bootstrapknockout.jsbootstrap-4

What is the best way to integrate a CSS designed flag in my website's top navigation bar?

My goal is to make my website multilingual, allowing users to switch between languages using flags in a dropdown menu. Initially, I tried creating the flag images solely with CSS for better resizing ability but faced difficulties. So, I resorted to using s ...

htmlcss