Align buttons to the center within a row using Bootstrap

I am having trouble centering all buttons in each col-md-4:

<div class="row position-relative mt-2">
  <div class="col-md-4 center-block">
    <div class="center-block align-to-bottom">
      <div class="btn-group-vertical">
        <p>
          <button class="btn btn-info btn-sm btn-block" type="button">
            button
          </button>
        </p>
        <p>
          <button class="btn btn-warning btn-sm btn-block" type="button">
            button
          </button>
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <div class="btn-group-vertical">
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>

      <p>
        <button class="btn btn-warning btn-sm btn-block" type="button">
          button
        </button>
      </p>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <p>
      <button class="btn btn-success btn-sm btn-block" type="button">
        button
      </button>
    </p>
  </div>
</div>

Another issue I am facing is with using w-100, h-85... it does not seem to work. I am also searching for a solution to set the relative size of buttons.

cssbuttonbootstrap-4

Answer №1

If you want to center align a button horizontally, simply add the class text-center to the parent column.

I made some adjustments by removing the p tags and adding margin directly to the button using the class mb-2.

I also trimmed down some unnecessary classes that weren't part of Bootstrap 4. Feel free to reintroduce them if needed.

Instead of making the button span the full width, I placed each button in separate columns within their own rows to achieve the block effect.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
     
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <button class="btn btn-success btn-sm" type="button">
      Button
    </button>
  </div>
</div>

I believe this solution addresses your concerns. Please let me know if there are any further adjustments needed.

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-aligned video text overlay that adapts to different screen sizes for a responsive design

I am looking to showcase a full-width video with overlay text that is perfectly centered both vertically and horizontally on the video. The centering should adapt to changes in viewport width so that it remains centered at all times. Additionally, I would ...

htmlcssvideooverlay

Stopping background content from scrolling while using position: fixed

Is there a way to prevent content from scrolling behind a fixed position element? Check out the demo here .navbar-default { background-color: #4c68f9; margin-bottom: 0; border: none; } .navbar-default.affix { background-color: #4762ed; margin ...

htmlcsscss-positionz-index

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

Do CSS have a conflict resolution rule? While my fadein keyframes function perfectly, I encounter issues with my slidedown animation

Using react and css, I have created two animations in my css file: @keyframes fadein { 0% { visibility: hidden; opacity: 0; } 50% { opacity: 0.5; } 100% { visibility: visible; opacity: 1; } } ...

cssreactjscss-animations

Ajax function implemented successfully with stylish design

Hi there! :) I'm encountering an issue with my code. I am trying to create a dropdown filter using ajax, php, and json. The first dropdown menu (for selecting the build year of a car) is populated through php. The second dropdown menu allows users to ...

jquerycssajax

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

Issue with CSS style on header with hyperlink

My CSS style includes a hyperlink for the "Title" to quickly navigate back to the home page. However, when I insert a table, this hyperlink gets disabled. /* JavaScript */ .header { position: absolute; height: 85px; right: 0; top: 0; left: 0; padding: ...

htmlcsshyperlink

What is the best way to showcase a single <ul> list in an infinite number of columns?

Utilizing Django on the backend, I aim to showcase the list below in an unlimited number of columns with overflow-x: auto. <ul class="list"> {% for i in skills %} <li>{{i}}</li> {% endfor %} </ul> Example Result: 1 7 ...

javascripthtmljquerycssdjango

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui

Having difficulty implementing Bootstrap on a demo Angular project

I am currently working on an Angular Application and facing issues with loading styles properly. Below is the code I have: menubar.html: <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="display: inline&q ...

angularbootstrap-4

Making the navbar color modifications to the dropdown menu

I am currently working on applying color changes to the text in my navbar for the links that have been visited, are active, and are being hovered over. I have successfully implemented this for my regular hyperlink elements. However, I am facing an issue wi ...

htmlcssnavbar

ng-deep is causing changes in sibling components

Facing a challenge with Angular Material Design as I discovered the need to utilize ng-deep to customize the styling of an accordion. The issue is that when I use this method, it affects another accordion in a different section which is undesirable. Is th ...

cssangularangular-materialangular7

Creating a full-width Bootstrap layout with dual backgrounds and a two-column structure

Explaining this concept is quite difficult, which is why I haven't been able to find an answer on Google. I am currently using Bootstrap 3 and I am trying to create a layout with a full width background image, along with two transparent color backgro ...

htmlcsstwitter-bootstrap

initiate an animated sequence upon the initialization of the Angular server

Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...

htmlcssangulartypescript

Two challenges I encountered with my CSS dropdown menu bar

I've been working on a CSS top dropdown navigation bar, but I'm encountering two issues that I can't seem to resolve. The first problem is that my nav div either extends too far down or my 1px right border tabs aren't reaching the botto ...

htmlcss

Folding into itself lies another folding

While attempting to nest a collapse area inside another collapse, I encountered an issue. Upon clicking to open the first collapse, it functions perfectly. However, when trying to open the second collapse (nested within the first one), it inadvertently cl ...

htmlbootstrap-4

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Currently, I am working on creating a footer that remains fixed at the bottom of the user's screen regardless of the screen size. However, I also want the header to transition from a fixed position to being part of the page when the user scrolls down. ...

javascriptjquerycssscroll

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

cssangularangular-materialmaterial-design

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

cssangulartypescriptsassmapbox-gl

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

javascripthtmlcssangulartypescript