CODEWITHSUNDEEP
htmlcsstwitter-bootstrapalignment
codeBoy
codeBoy

Reputation: 533

Align Buttons Side by Side Bootstrap

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>

Upvotes: 23

Views: 95793

Answers (8)

flashsplat
flashsplat

Reputation: 537

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

Upvotes: 2

willingdev
willingdev

Reputation: 9546

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

Upvotes: 0

Rafael Bola&#241;os
Rafael Bola&#241;os

Reputation: 11

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>

Upvotes: 0

Vaishnavi
Vaishnavi

Reputation: 449

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>

Upvotes: 8

Vedha Peri
Vedha Peri

Reputation: 1466

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

Upvotes: 6

Dmitriy
Dmitriy

Reputation: 4503

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>

Upvotes: 34

Samson Thomas
Samson Thomas

Reputation: 125

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>

Upvotes: 11

hafiz ali
hafiz ali

Reputation: 1446

<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>

Upvotes: 17

Related Questions