Position a div at the bottom of another div using Bootstrap

I'm facing an issue with trying to position an inner div at the bottom of an outer div using bootstrap classes. I have attempted various methods in both bootstrap and regular CSS, such as vertical-align: bottom; and setting position to absolute, but none seem to be working. Here is the code snippet I have been working with:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
  <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
    <li>stuff</li>
  </ul>
  <div>
    <button type="button" class="btn btn-outline-primary">Edit</button>
    <button type="button" class="btn btn-outline-primary">Delete</button>
  </div>
</div>
cssbootstrap-4

Answer №1

If you want to achieve this using Bootstrap 4 classes, simply include the classes d-flex flex-column in the card-body element and then add the mt-auto class (which stands for margin-top:auto) to the inner div like this: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-body d-flex flex-column">
    <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
        <li>stuff</li>
    </ul>
    <div class="mt-auto">
        <button type="button" class="btn btn-outline-primary">Edit</button>
        <button type="button" class="btn btn-outline-primary">Delete</button>
    </div>
</div>

This setup will ensure that the inner div remains anchored to the bottom of the container.

Answer №2

Is this the desired outcome you're aiming for?

.card-body {
  border: 4px solid blue;
  position: relative;
}

.inner {
  border: 4px solid red;
  position: absolute;
  bottom: -50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
  <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
    <li>stuff</li>
  </ul>
  <div class="inner">
    <button type="button" class="btn btn-outline-primary">Edit</button>
    <button type="button" class="btn btn-outline-primary">Delete</button>
  </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

How can I use a CSS file in PHP to conceal the folder structure?

main.css $theme->assign('css_file',SITE_URL.'styles.php?theme='.THEME_ID); $theme->display(TEMPLATES_PATH.'header.tpl'); header.tpl <link rel="stylesheet" href="{$css_file}"> styles.php include TEMPLATES_PATH. ...

phpcss

Maintaining the proportions of divs containing background images

I'm dealing with a background image that features a large blue diagonal line where we want our content to align. However, I'm encountering difficulties in maintaining the alignment of the content as it resizes (resulting in the background diagon ...

htmlcsstwitter-bootstrap-3

Having trouble displaying SVG elements in Material UI

Currently, I am faced with an issue while trying to display a .svg file in the header of a drawer using Material-UI and create-react-app. Instead of the expected .svg image, all I see is a broken image rendering. Any assistance on resolving this problem ...

cssmaterial-uicreate-react-app

Issue when activating Materialize Bootstrap

I'm facing an issue with my code. I have implemented a feature where a modal should be triggered after a user successfully adds a new user. However, I am using Materialize and the modal is not being triggered. Below is a snippet of my code: <div i ...

javascriptjquerycssmaterialize

Is there a way for me to remove an uploaded image from the system

Here is an example of my HTML code: <input type='file' multiple/> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>"> <button style="display: none;" type="submit" cl ...

javascriptphpjqueryhtmlcss

The child element with a minimum height of 300 pixels is failing to inherit the height of its parent

Here is the HTML code for a div block I am working with: <div className={'row ge-container'}> <div className={'a-span3 ge-container-navigation'}> hello </div> <div className={'a-span9 ge-containe ...

css

What is the best way to align a form control and its label side by side, center them, and then stack them on top of each other when the screen size decreases while keeping them centered

Is there a way to center a form control and its label inline, then have them stack on top of each other (label over input textbox) as the screen size decreases? I am attempting to achieve this using Bootstrap. ...

bootstrap-4

What is the method for altering the background color of an input field upon entering text?

As a beginner in Javascript and jQuery, I am struggling to understand why my code is behaving the way it does. I have written two similar functions aimed at changing the background color of an input field. The objective is to set the background color of t ...

javascriptjqueryhtmlcss

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Can someone please assist me today with the following task: Step 1: <div id="htmlData"> <div class="col-md-12"> <div class="pull-left"> <h3>Report: <strong>Travel </strong></h3> ...

javascriptphpjqueryhtmlcss

Use jQuery to apply a class to some input elements when certain events like keyup or

If I type something in the input field, it should add a border to the li tag containing the text. The current script works fine, but is there a way to make this jQuery script shorter? Thank you for your help! .add_border{ border: 2px solid #000 !impor ...

javascriptjquerycss

Obtaining a CSS element again to be utilized for boundary checking purposes

Is it possible to retrieve a CSS element? I recently found myself in a situation where I needed to add some code to an Adobe Edge project, specifically involving the manipulation of margin-top and margin-left properties. While experimenting with moving an ...

csshtmladobe-edge

What could be causing my website to automatically adjust the CSS height on its own?

My code looks like this: <li style = "height: 250px;"> <p>Foo</p></li> Despite my efforts, when I visit the website, the height doesn't seem to change. After inspecting the element in Chrome, I discovered that it's s ...

htmlcssheighthtml-lists

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

javascriptjqueryhtmlmysqlcss

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template: <div my-custom-popover ...

htmlcssangularjsangularjs-directive

Image remains fluid within a static div without resizing

Any assistance would be greatly appreciated. I am currently facing an issue with a fixed div that is floating at the bottom of the screen, serving as ad space for the mobile version of a website. The problem arises when attempting to resize the browser win ...

javascripthtmlcss

Incorporating a variety of background images and colors into a navigation bar

Hey there, I could really use some assistance with a design challenge I'm facing. My goal is to have a navigation bar with two different background colors - most of the list items should have a red background, while one specific item needs to have a b ...

htmlcssmenunavigation

When I separate the div into its own line in the HTML/CSS code, the behavior changes significantly

I'm encountering an issue with my HTML/CSS structure: .im-wrapper { width: 100%; height: 100%; position: fixed; overflow: hidden auto; top: 0; left: 0; } .im-backdrop { background-color: var(--darkblack); opacity: 80%; width: 1 ...

htmlcssbootstrap-5

Attempting to align a header and an unordered list side by side

I'm feeling a bit lost here and I've been doing my best to find a solution online, but no luck so far. What I need help with is getting my header element and unordered list to appear on the same line without losing their respective margins. ...

htmlcssheaderhtml-lists

Leveraging the power of CSS id selectors to customize the appearance of a Grid

In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...

c#asp.netcss

jQuery cannot access a hidden CSS property

I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly. However, when I use jQuery's .val() to get the value of the field, ...

javascriptjqueryhtmlcss