How to fix CSS with placing multiple buttons on one side of a row in Bootstrap?

Question

I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:

#submitGPBtn {
  margin-right: 30px;
}

<div class="row">

  <div>
    <h4> Group Pattern Test</h4>
  </div>

  <div class="mx-auto">
    <button class="btn btn-primary">Save</button>
  </div>

  <div class="mx-auto">
    <button class="btn btn-primary">Close</button>
  </div>

  <div class="ml-auto">
    <button class="btn btn-primary" id="submitGPBtn">Submit</button>
  </div>

</div>

This question has been answered very thoroughly in this post: https://stackoverflow.com/questions/15446189/how-can-i-get-my-twitter-bootstrap-buttons-to-right-align — Nathaniel Flick, Jan 27 '20 at 20:11

score 2 · Answer 1 · answered Jan 27 '20 at 19:54

2

You would want to use a btn-toolbar to group your buttons in-line.

#submitGPBtn {
  margin-right: 30px;
}

<div class="row">

  <div class="col">
    Group Pattern Test
  </div>
  <div class="col">
  <div class="btn-toolbar">

    <button class="btn btn-primary">Save</button>
  
    <button class="btn btn-primary">Close</button>
  
    <button class="btn btn-primary" id="submitGPBtn">Submit</button>

  </div>
  </div>
</div>

answered Jan 27 '20 at 19:54

Sameer

383
1
10

It helped out but, how can I get the buttons to be at the end of that ```col```. In that, I mean on the right side. – kane_004 Jan 27 '20 at 20:02

score 0 · Answer 2 · answered Jan 27 '20 at 20:14

This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.

#submitGPBtn {
  margin-right: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col">
    Group Pattern Test
  </div>
  <div class="col">
  <div class="btn-toolbar float-right">

    <button class="btn btn-primary">Save</button>
  
    <button class="btn btn-primary">Close</button>
  
    <button class="btn btn-primary" id="submitGPBtn">Submit</button>

  </div>
  </div>
</div>

score 0 · Answer 3 · answered Jan 27 '20 at 23:00

In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".

I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.

My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.

.container {
  background-color: lightyellow;
}

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="row">
        <div class="col text-left">
          <h4> Group Pattern Test</h4>
        </div>
        <button class="btn btn-success ml-auto">Save</button>
        <button class="btn btn-success ml-1">Close</button>
        <button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
      </div>
    </div>

How to fix CSS with placing multiple buttons on one side of a row in Bootstrap?

3 Answers3