CODEWITHSUNDEEP
csstwitter-bootstrap-3
user2281858
user2281858

Reputation: 1997

Align buttons side by side - bootstrap 3

Take a look at the below example.

Link to Bootply

I want the <a> tag to be besides Button 2.

Upvotes: 5

Views: 11826

Answers (1)

dfsq
dfsq

Reputation: 193261

Bootstrap uses 12 column grid. Right now two buttons take the whole available space (both 6-column width) leaving no space for the third. You can layout your buttons as 5+5+2 columns. For example:

<div class="col-md-6 col-md-offset-2">
    <button type="submit" class="btn btn-default btn-md col-md-5">Button 1</button>
    <button type="reset" class="btn btn-default btn-md col-md-5">Button 2</button>
    <a href="#" class="btn btn-default btn-md col-md-2"><span class="glyphicon glyphicon-search"></span></a>
</div>

Demo: http://www.bootply.com/RAqyEiTp1i

You want to place the third button outside the row container, you can position it absolutely relatively to the col group:

<a href="#" class="btn btn-default btn-beside"><span class="glyphicon glyphicon-search"></span></a>

CSS:

.btn-beside {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -10px;
}

Demo: http://www.bootply.com/5n3y1uZDng

Upvotes: 5

Related Questions