ankitd ankitd - 1 month ago 7
HTML Question

Bootstrap button group always align horizontally

Bootstrap button group make them always in one line, always align horizontally.
When I resize window button comes down vertically.

I am looking for a solution where button comes always in one line no matter what.

I have applied

style="white-space:nowrap;"
on parent div but it doesn't work.

If possible try to use only bootstrap's inbuilt css classes.
Please answer by keeping current HTML structure as it is. Because that's how it is implemented in mine project.

This is simplest implementation of bootstrap button group. See PLUNKER

CODE



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>




Pat Pat
Answer

You need to override the float: left; as well as add white-space: nowrap; to the parent. So in your css:

.btn-group {
  white-space: nowrap;
}

.btn.btn-primary,
.btn.btn-success {
  float: none;
}

plunker: https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview

Although, I would recommend adding a specific class to the btn-group/btn-primary/btn-success because overriding bootstraps styling instead of just adding a custom class is a bad practice.

For example:

HTML:

<div class="btn-group custom-class">
<button type="button" class="btn btn-primary custom-class">
<button type="button" class="btn btn-success custom-class">

CSS:

.btn-group.custom-class{...}
.btn.btn-primary.custom-class,
.btn.btn-success.custom-class {...}

https://plnkr.co/edit/nAZD6Hssgnep37fXU9vb?p=preview

Comments