Mastering Bootstrap: The Ultimate Guide to Aligning and Centering Buttons at the Bottom of Columns of Equal Height

My Bootstrap 4 layout consists of three columns using col-sm classes. You can view the codepen example here: https://codepen.io/anon/pen/EryRJL?editors=1100

Within each column, I have a paragraph of text followed by a button. I'm trying to figure out how to align all the buttons vertically at the bottom of their respective columns while centering them.

I attempted to achieve this by using the following CSS:

.button-container {
    width: 100%;
    position:absolute;
    bottom: 0;
    text-align: center;
}

However, the centering doesn't work as expected due to the width: 100% causing the div to shift right because of column padding.

Answer №1

Thanks to this useful snippet, I was able to solve the issue. Instead of using width: 100%, all I needed was to apply left: 0 and right: 0 to perfectly fit the container.

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

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and P ...

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

I'm trying to use a JavaScript function to trigger the click event of an HTML button when a drop-down list is changed. However, it seems like the correct id is not being found. @using (Ajax.BeginForm("GetReport", "Choices", new AjaxOptions() { ...

The issue with jquery's marginTop functionality appears to be malfunctioning

Is there an easy way to vertically center text of unknown height within a div of known height? I've experimented with the css display: table-cell option without success, so I'm currently using jQuery to detect the height and apply a top margin if ...

Versatile CSS Navigation with Multiple Rows

Looking to implement a content panel switcher with 6 navigation items split between 2 rows, each containing 3 items. I want all columns to be evenly aligned to the left without excessive use of divs and clutter in the HTML code. Any suggestions on achiev ...

Styling the background of a navigation menu specifically for mobile devices using CSS

Currently, my focus is on developing the website I am using Elementskit nav builder and I aim to change the background color of the navigation menu on mobile and tablet devices to black The existing code snippet is as follows: margin-top: 6px; } @med ...

Remove an entire anchor tag from a contenteditable div with just one key press

I need help with my HTML code. Here is what I have: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="edi ...

Displaying both items upon clicking

Hey there, I'm having an issue where clicking on one article link opens both! <span class='pres'><img src='http://files.appcheck.se/icons/minecraft.png' /></span><span class='info'><a href=&apo ...

Embellishing Your Website with Unique Cursor Styles

Looking to add personalized cursors to my website using asp.net 4.0. On my master page, I aim to set a custom cursor as the default for the entire site and have different custom cursors for all links. Is this achievable? ...

What is the process for uploading an image and entering text into the same row in Google Sheets?

Hello, I am currently working on a Google Script web app that enables users to upload 10 photos along with comments for each photo. This information will then be inserted into a Google Sheet when the user clicks the 'upload' button on the web app ...

Design a stylish outline for the element <div class="loader">

Initially, I managed to create a border around the body without any issues. However, I encountered a problem when attempting to implement a rotating border animation. In order to achieve this, I had to create a div encompassing all my content. The issue ar ...

What is the best way to exclude a particular character from a text element utilizing jquery?

Looking to extract the numerical value from a div containing: <div class="balance"...>$500.48</div> The goal is to retrieve 500.48 as a number, not a string. One approach is to use alert($(".balance").text()) to verify that the content is ret ...

The ng-controller (dropdown menu) is functioning properly when tested locally and on JSFiddle, however, it is not working on

My HTML website with ng-app is functioning properly when tested locally and on certain coding platforms like JSFiddle and CodePen. However, it seems to encounter issues when deployed on Google Sites, Github, W3, and similar websites. The main functionalit ...

Distinguishing CSS Variances on ASP.Net Site with Android 4+

I am encountering an issue with my current ASP.Net Mobile Website design. It is rendering correctly on android phones pre 4, iPhones, and Blackberries. This problem requires a bit of setup to explain... CSS tr { color: #00ff00; } #MasterBackButton { ...

Exploring the Scope of LocalStorage in Javascript

I've recently begun working with local storage and encountered some scope issues. Whenever I try to console.log(test), the second if statement returns undefined. What am I missing here? This is my current code; $("document").ready(function(){ ...

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

Progressive Web App with Vue.js and WordPress Rest API integration

When creating an ecommerce website using Wordpress, I utilized Python for scraping data from other websites to compare prices and bulk upload products through a CSV file. My next goal is to learn Vue and transform the website into a PWA as it will be esse ...

What causes the Bootstrap 4 Beta .invalid-feedback to show up even when the field is valid?

I am experiencing an issue with a form that is using Bootstrap 4 beta for form validation. Everything seems to be working as expected except for the invalid-feedback class. Initially, the feedback div is displayed correctly like this: https://i.sstatic.ne ...

What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

When trying to play a single MP3 file, the code below is designed to skip to a specific part of the track and then start playing from that position. However, despite the cursor moving to the correct spot in the MP3, it fails to play upon clicking the Sta ...

What is the best way to include PHP code within an HTML tag?

I need help figuring out how to display the value of a variable called 'fname' inside an HTML tag. Below is a snippet of my code where I'm trying to get the input value and print it in a paragraph tag. <?php if (isset($_POST['submit ...