23

I am trying to align my two bootstrap buttons side by side (horizontally), right now they are aligned one on top of another (vertically). I have found a few questions on here, but still can't seem to get it right...

I will post my code below:

<div class="row">
    <div class="col-sm-12">
         <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-primary btn-md center-block" Style="width: 100px; margin-bottom: 10px;" OnClick="btnSearch_Click" />
         <asp:Button ID="btnClear" runat="server" Text="Clear" CssClass="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" />
     </div>
</div>

8 Answers 8

34

1) use display: inline-block

#btnSearch,
#btnClear{
    display: inline-block;
    vertical-align: top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-12 text-center">
        <button id="btnSearch" class="btn btn-primary btn-md center-block" Style="width: 100px;" OnClick="btnSearch_Click" >button</button>
         <button id="btnClear" class="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" >button</button>
     </div>
</div>

or

2) remove class .center-block

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-12 text-center">
        <button class="btn btn-primary btn-md">button</button>
        <button class="btn btn-danger btn-md">button</button>
     </div>
</div>

17
<div class="container">
<div class="row">

    <div class="col-xs-6">
        <button class="btn btn-warning btn-block">Talent-signup to find jobs</button>
    </div>
    <div class="col-xs-6">
        <button class="btn btn-success btn-block">Employers- signup to hire talent</button>
    </div>

</div>

11

You can use an out div with a class btn-group. This helps to align the buttons horizontally. Using col-md-6 for each button div can make the buttons missaligned with unwanted space in between.

<div class="btn-group">
<a href="#" class="btn btn-warning">Talent-signup to find jobs</a>
<a href="#" class="btn btn-success">Talent-signup to find jobs</a>
</div>
2
8

Try this for Bootstrap 4.Worked for me

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
</div>
6

This worked for me

<div class="container">
    <div class="row">
      <div class="col">
        <button class="btn btn-danger form-control  btn-block" routerLink='/login'>Cancel</button></div>
      <div class="col">
        <button id="btnSubmit" class="btn btn-primary form-control btn-block" type="submit" (click)="onSubmit()">Submit</button></div>
    </div>
  </div>

enter image description here

1

I suggest using "btn-toolbar" over "btn-group". The later will flatten the inside edges of your possibly round buttons (available as early as v2.3.2 and still works in v5.2x).

<div class="btn-toolbar">
    <a href="#" class="btn btn-warning me-2">Don't Click Me</a>
    <a href="#" class="btn btn-success">Click Me</a>
</div>

enter image description here

BootStrap 5.2x Docs for Toolbar

1
  • This worked the best for me in Bootstrap 5. Thanks!
    – Nick Gobin
    Jul 25 at 5:30
0

This is the one that I use with bootstrap!

<div class="d-flex justify-content-center">
    <button class="btn btn-dark mr-2" type="submit">Procesar</button>
    <button class="btn btn-danger" type="submit">Cancelar</button>
</div>
0

Use d-flex and align-items-end on parent div

<div class="col-lg-2 d-flex align-items-end">
    <button type="submit" class="btn btn-outline-success btn-block m-2">Submit</button>
    <button type="button" @onclick="CancelButtonClick" class="btn btn-outline-secondary btn-block m-2">Cancel</button>
</div>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.