Align Bootstrap components to the bottom of the page

html

<div class="container">
  <div id="movies" class="well">
    <div class="col-md-3">
      <div class="well text-center">
        <img src="#">
        <h5>title</h5>
        <a class="btn btn-primary" href="#">Detail</a>
      </div>
    </div>
    <div class="col-md-3">
      <div class="well text-center">
        <img src="#">
        <h5>title</h5>
        <a class="btn btn-primary" href="#">Detail</a>
      </div>
    </div>
  </div>
</div>

css

#movies img, #movie img{
  width: 100%;
}
@media(min-width:960px){
  #movies .col-md-3 .well{
    height: 390px;
  }
  #movies .col-md-3 img{
    height: 240px;
  }
}

img The alignment of the Detail buttons is not consistent as shown in the image. To address this issue, I am looking to move the first button downwards.

Answer №1

If you want to make this layout, you can utilize the power of `flexbox`. Give this code snippet a try and check it out in "full page" mode.

#movies img, #movie img {
  width: 100%;
}

@media(min-width:960px) {
  #movies .col-md-3 .well {
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #movies .col-md-3 img {
    height: 240px;
  }
  #movies .btn {
    margin-top: auto;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd89938b938c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container">
  <div id="movies" class="row well">
    <div class="col-md-3">
      <div class="well text-center">
        <img src="https://via.placeholder.com/260">
        <h5>Qui minim nulla veniam.</h5>
        <a class="btn btn-primary" href="#">Detail</a>
      </div>
    </div>
    <div class="col-md-3">
      <div class="well text-center">
        <img src="https://via.placeholder.com/260">
        <h5>Ut reprehenderit cillum occaecat sint voluptate</h5>
        <a class="btn btn-primary" href="#">Detail</a>
      </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

generate a flexible div that adjusts its height based on the size of the browser window

Is it possible to create a div layout structured like this: <div_wrapper> <div_header> </div_header> <div_content> </div_content> </div_wrapper> Upon page load, the div_header o ...

The image is refusing to adjust according to CSS settings

Why won't the image adjust to the CSS? I'm trying to move the picture to the side a bit by adding margin, but it's not working out. Any ideas? HTML <div class="la"> <center> <h1> GREET THE TEAM </h ...

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

Creating a competition schedule - pieces don't quite mesh

Having trouble getting my tournament bracket visuals to come together smoothly! Here is the CSS code I have: #tournament-holder{ width:708px; padding:20px 0 20px 15px; float:left; } .vertical-holder{ width:100px; padding-right:15px; float:left; } .horizo ...

Resolved the issue of the background image flickering during the transition of the slideshow at the top of

I'm experiencing a unique issue in Chrome only. On my webpage, I have a div with a fixed background image placed below a slider at the top of the page. However, when the slider advances to the next slide, the fixed background image almost completely d ...

Centering Tabs in React-Bootstrap

By default, Bootstrap-react's tabs align to the left. <Tabs defaultActiveKey={2} id="uncontrolled-tab-example"> <Tab eventKey={1} title="Tab 1"> Tab 1 content </Tab> <Tab eventKey={2} title="Tab ...

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

What is the best way to layer multiple navigation menus on top of each other using z-index?

I'm facing a challenge trying to position or overlap two navigation menus in my project. The technologies I am using are Bootstrap, HTML, and CSS. It seems like I might need to utilize the z-index property, but I'm unsure about the exact impleme ...

Angular Material Sidenav fails to cover the entire screen while scrolling

https://i.stack.imgur.com/32kfE.png When scrolling, the Sidenav is not expanding to take up 100% of the screen and it continues to scroll along with the page content. <div layout="column"> <section layout="row" flex> <!-- siden ...

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

Encase children within a view component in React Native

I've been working on the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style= ...

What are your thoughts on using image maps with CSS?

My images are also links, and the code looks like this: <a href="../www.google.com"><img src="pages/squirrely.png" /></a> While they function properly as links, I want them to only be clickable if you click on the central part of the im ...

Stop HTML elements from shifting position when content is modified using JavaScript

'use strict'; const countdown = () => { // create function to calculate time until launch in Days/Hours/Minutes/Seconds // time difference const countDate = new Date('May 25, 2024 00:00:00').getTime(); const now = new Date( ...

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

I am currently troubleshooting an issue with a HTML5 canvas inside a Bootstrap modal. The canvas is designed to be a selection game where objects can be selected and manipulated. Everything works fine in the center of the 600x600px canvas, but there is an ...

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. ...

Adjust the arrangement of divs when resizing the window

I have utilized flexbox to rearrange the boxes. Here is a link to the demo code My issue arises when resizing for smaller screens; I need to place B between A and C. https://i.stack.imgur.com/M0dpZ.png Any suggestions on achieving this goal? Thank you i ...

Utilizing jQuery to Print a Div's Content Along with its CSS styling

Looking for a way to include CSS styles when using this function in my Wordpress plugin that utilizes jQuery to print content from a specific div with the "table_disp" class. function pop_print(){ w=window.open(null, 'Print_Page', 'scro ...

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

I have been experimenting with Bootstrap's Example accordion code, which can be accessed via this link: http://jsfiddle.net/qba2xgh6/18/ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel ...

What's the reason for the element not inheriting margins from its parent?

I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...

Fluctuating problem arises when placing one div over another div while hovering

Sorry if the title isn't clear. Basically, I have a div that when hovered over, triggers another div to appear with display:block, showing it above the original div. It works well but there is some flickering when moving the cursor over the second div ...