Matthew Malone February 2016

Bootstrap column with two fullwidth block buttons

I want a Bootstrap column to resize buttons nicely when the screen type changes. But the buttons end up with no space between them and and two separate lines (on the small screen).

How do I get them to resize into smaller buttons, and not split onto a new line?

want this... get this (on a smaller screen)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Example!</div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-xs-3 col-xs-offset-4">
                            <a href="#" class="btn btn-success btn-block" role="button">Add Item</a>
                        </div>
                        <div class="col-xs-3">
                            <a href="#" class="btn btn-danger btn-block" role="button">Remove Item</a>
                        </div>
                    </div>
                </div>
           </div>
        </div>
    </div>
</div>

Answers


Timo February 2016

You could use col-xs-3 instead of col-md-3 and col-xs-offset-4 instead of col-md-offset-4


WitVault February 2016

Remember that bootstrap grid row is of 12 column, so what ever offset or column you are using it should add up to 12 and to target small screen devices such as mobile use col-xs-*. Everything else is fine.

<div class="form-group">
    <div class="col-xs-3 col-xs-offset-6">
        <a href="#" class="btn btn-success btn-block" role="button">Add Item</a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="btn btn-danger btn-block" role="button">Remove Item</a>
    </div>
</div>


Chris February 2016

If you want the same styling for small devices as well as large devices, you can omit the md styling and just use sm. If the width get's really small, you can remove the offset and use that gained width on the elements instead on xs widths.

To fix the buttons being cut off, remove the btn-block class.

Demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
    <div class="col-sm-3 col-sm-offset-3 col-xs-6">
        <a href="#" class="btn btn-success" role="button">Add Item</a>
    </div>
    <div class="col-sm-3 col-xs-6">
        <a href="#" class="btn btn-danger" role="button">Remove Item</a>
    </div>
</div>

As a side note, if you want the buttons to be centered here, use offset 3 instead of 4.


varun sharma February 2016

If i am clear then try my updated code.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
    <div class="col-sm-3 col-sm-offset-3 col-xs-6 text-center">
        <a href="#" class="btn btn-success" role="button">Add Item</a>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <a href="#" class="btn btn-danger" role="button">Remove Item</a>
    </div>
</div>

Post Status

Asked in February 2016
Viewed 2,451 times
Voted 5
Answered 4 times

Search




Leave an answer