How to center block buttons using bootstrap

I've been struggling with a Bootstrap bug since yesterday and I can't seem to figure it out. I have placed 2 buttons inside a div with flex display and align-items-center properties, but the second button is appearing lower than the first one and I'm unable to fix it.

Here is my code:

<div class="d-flex justify-content-center align-items-center mt-1">
     <a href="/product/{{ $product->id }}" class="btn btn-primary btn-block"><i class="fas fa-cart-arrow-down"></i></a>
     <a href="/product/{{ $product->id }}" class="btn btn-primary btn-block ml-1"><i class="fas fa-store"></i></a>
</div>

This is what I am seeing:

https://i.sstatic.net/9LQO9.png

htmlcssbootstrap-4

Answer №1

The reason for this issue lies with the .btn-block class. According to bootstrap's guidelines: To create block-level buttons that extend across the entire width of their parent element, simply add the .btn-block class.

In order to space out multiple block buttons vertically, _buttons.scss file in bootstrap includes the following code snippet:

.btn-block+.btn-block {
    margin-top: .5rem;
}

Therefore, in your specific code, the margin-top style is being applied to the second button's btn-block class.

<a href="/product/{{ $product->id }}" class="btn btn-primary btn-block ml-1"><i class="fas fa-store"></i></a>

You have two options to resolve this issue: you can either apply the "margin-top: 0;" style to the second button or adjust the class names based on your needs.

margin-top: 0;

Answer №2

Bootstrap allows for vertical stacking of consecutive btn-block elements, but this behavior is being disrupted by the flex container. To address this issue, consider replacing btn-block with flex-grow-1...

 <div class="d-flex justify-content-center align-items-center mt-1">
        <a href="/product/{{ $product->id }}" class="btn btn-primary flex-grow-1"><i class="fas fa-cart-arrow-down"></i></a>
        <a href="/product/{{ $product->id }}" class="btn btn-primary flex-grow-1 ml-1"><i class="fas fa-store"></i></a>
 </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

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

javascriptjqueryhtmlcss

Tips for aligning a menu that expands from the side to the center

I'm trying to center the menu on my webpage, but the issue is that it's stretching from the sides. Here's a sample image of the menu layout: I'm struggling to figure out how to fill the empty space on the left side of the menu. ...

htmlcss

Display the preload.gif before the image finishes loading

I have a collection of images in a gallery and I want to assign a class name to all image tags, so that before they finish loading they show a preload.gif. Once the image finishes loading, it should display the actual image. I attempted to achieve this usi ...

javascriptjqueryhtmlcss

Utilize Jquery for Parsing a Json Document

I am currently facing challenges parsing a JSON file into my HTML page. Below is the structure of my JSON file: { "menu":[ { "id":"contact", "leaf":true, "description":"testing", "link":"", "content":" ...

jqueryhtmljson

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for maintaining a stationary element with fluctuating height positioned at the bottom in React

I am trying to create a fixed element with dynamic height, meaning its size changes when the browser window is resized. You can see an example of what I'm talking about here: https://stackblitz.com/edit/react-yuqarh?file=demo.tsx This element acts li ...

javascriptcssreactjsmaterial-ui

Safari is displaying CSS in a completely unique way

Working on my very first webpage using just HTML and CSS has been an interesting experience. After creating the first 2 pages and checking in Chrome and IE, I decided to test in Firefox and Safari. To my surprise, Safari rendered my CSS differently than e ...

htmlcsssafariflexboxvendor-prefix

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

javascripthtmljquery

Tips for extracting data from a JSON using a variable

I'm currently facing an issue in extracting data from a JSON file. I have declared a variable and am attempting to use its value to retrieve information from the JSON. However, I seem to be encountering an error that I can't identify. let e = &qu ...

javascripthtmljson

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

Can the tab button be used to move to the next field?

Is it possible to navigate to the next field by pressing the tab button? If so, how can we achieve this? Currently, I am utilizing Bootstrap classes col-md-6. Thank you! <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4. ...

javascripthtmlbootstrap-4

HTML underlay with interactive z-index functionality

Is it possible to create an interactive Google Map with a frame image displayed? <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="button" onclick="$('#frame_image').show();" val ...

htmlcssz-index

Creating a full-page scrollbar in React when a component goes beyond the viewport

I'm currently working on an app that has a layout like this: https://i.sstatic.net/w3fty.png The middle component extends beyond the page, which is why I need a scrollbar to navigate down to it. However, I'm struggling to implement a regular wh ...

javascripthtmlcssreactjs

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...

jqueryhtmlcssjquery-uijquery-ui-dialog

Center the title vertically APEXCHARTS

I created this chart using Apex charts https://i.sstatic.net/j34Wc.png However, I am facing an issue where the 'Chart' title and caption are not properly aligned. The title should align with the graph horizontally, and the caption vertically. ...

javascriptjqueryhtmlcssapexcharts

Is it possible to highlight the original 'anchor' or position of an element that has been moved using the float property?

Can the XXX be displayed using a CSS trick without the need for an extra HTML element or container? I attempted to use pseudo-elements and translate, but it was unsuccessful. p { background-color: grey; max-width: 200px;} small { float: right; margin-r ...

htmlcss

What is the process for importing Gwt-Bootstrap?

I decided to incorporate Gwt-Bootstrap into my UiBinder files. I made sure to import the following: xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"> in my UiBinder file and also added: <script src="http://html5shim.googlecode.c ...

twitter-bootstrapbootstrap-4gwtuibinder

In certain cases, webkit browsers may conceal LI A (display:block) elements

I have created a unique menu design that is based on the classic 'ul li' structure, but with 'a' elements set to display:block for precise positioning and sizing. There is also some transform:rotate applied, but this does not affect the ...

cssgoogle-chromemenusafariwebkit

Bootstrap 4 Alpha Grid does not support aligning two tables side by side

When working with Bootstrap 4, I am aware that the .col-xs classes have been removed. Instead of using .col, I have tested it on Bootstrap 3.5 which is currently being utilized. <div class="col-xs-4"> Table content for left ...

csstwitter-bootstrapbootstrap-4