CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Thomas W.
Thomas W.

Reputation: 2224

Avoid line breaks in bootstrap button group

I've a bootstrap button group which includes a text between the buttons:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group">
                <div class="btn btn-primary">
                    <i class="fa fa-chevron-left"></i>
                </div>
                <div>2016</div>
                <div class="btn btn-primary">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </div>
        </div>
    </div>
 </div>

How to avoid the line breaks, such that the buttons and the text are aligned in one line?

Upvotes: 1

Views: 8169

Answers (2)

Spencer D
Spencer D

Reputation: 3486

You need to display them in-line like:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group">
                <div class="btn btn-primary" style="display: inline-block;">
                    <i class="fa fa-chevron-left"></i>
                </div>
                <div style="display: inline-block;">2016</div>
                <div class="btn btn-primary" style="display: inline-block;">
                    <i class="fa fa-chevron-right"></i>
                </div>
            </div>
        </div>
    </div>
 </div>

Edit: Alternatively, as Turnip proposed in his answer, you can change the elements from divs to to another kind of element that is naturally displayed in-line. Either way, you will reach the same result.

Upvotes: 3

Turnip
Turnip

Reputation: 36642

divs are block elements. Change your buttons to <a>s and the text div to a <span> or any other inline/inline-block element.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group">
                <a class="btn btn-primary">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <span>2016</span>
                <a class="btn btn-primary">
                    <i class="fa fa-chevron-right"></i>
                </a>
            </div>
        </div>
    </div>
 </div>

Upvotes: 1

Related Questions