CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
anonn023432
anonn023432

Reputation: 3120

Bootstrap column does not go to the next line on small screen

I'm trying to make a form field with 4 buttons in the same row. I'm using Bootstrap and since I wanted the field and buttons to be vertically aligned, so I made a css class vcenter for it.

JSfiddle with the code

HTML

<form>
                <div class="row stopWrap">
                    <div class="form-group col-lg-8 col-md-8 col-sm-8 col-xs-12 vcenter">
                        <label for="inputFirstName">First Name</label>
                        <input type="email" class="form-control" id="inputFirstName" placeholder="First Name">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center vcenter">
                        <button type="button" class="btn btn-warning" aria-label="Left Align">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        </button>

                        <button type="button" class="btn btn-primary" aria-label="Left Align">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>

                        <button type="button" class="btn btn-danger" aria-label="Left Align">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                        </button>

                        <button type="button" class="btn btn-success" aria-label="Left Align">
                            <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
                </form>

CSS

.stopWrap{
 white-space: nowrap;
}
.vcenter {
 display: inline-block;
 vertical-align: middle;
 float: none;
}

Upvotes: 0

Views: 4266

Answers (3)

cssyphus
cssyphus

Reputation: 40038

Another option is to use a media query to adjust the float as bootstrap breaks at the col-xs-12 breakpoint (768px):

@media (max-width: 768px) {
  #mybutt{float:left !important;text-align:left;}
}

jsFiddle Demo

This allows you to keep your .vcenter class, if desired, and do other necessary things (such as text-align:left).

Upvotes: 0

Adam Michael Wood
Adam Michael Wood

Reputation: 1788

Why not put the buttons in a .row-fluid, and make each button a .span3?

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48972

The problem is due to float:none which overrides bootstrap float:left. That's why it does not go to the next line.

In your case, you should not use your vcenter. Remove it and add something like this to vertically align your buttons:

<div>
   &nbsp;
</div>

http://jsfiddle.net/5sceeno8/

It looks like a hack, but it's not because you set your <input type="email" /> width to 100%, you clearly want to display the label and your input on separate lines. Similar to this:

<div>
    <label for="inputFirstName">First Name</label>
</div>
<div>
    <input type="email" class="form-control" id="inputFirstName" placeholder="First Name">
</div>

After using &nbsp;, our button block has a similar structure to the input:

<div>
   &nbsp; //this is the replacement for <label> above which has the same height.
</div>
<div>
   //our buttons here
</div>

Upvotes: 1

Related Questions