CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
ThunD3eR
ThunD3eR

Reputation: 3436

Bootstrap issue with col-md-12

I am encountering someting really weird.

I have this structure:

<div class="row filterRes">
    <div class='col-xs-6 col-sm-6 col-md-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepickerFrom'>
                <input type='text' class="form-control action" placeholder="Från" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-xs-6 col-sm-6 col-md-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepickerTo'>
                <input type='text' class="form-control action" placeholder="Till" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <button class="btn btn-primary  btn-block col-md-12  ">Filtrera</button>
    </div>
</div>

My problem:

The last div with class = 

 col-md-12

is taking up the entire row and positioning itself over the two previous ones.

image in firebug:

enter image description here

I cant focus the two inputs because of this and I don't really understand it. If I set this on the last div:

col-xs-6 col-sm-12 col-md-12

the issue dissapears but the question remeains. When I add the class 

 row

I get the same result

What am I doing wrong here?

Upvotes: 0

Views: 1361

Answers (3)

Daniel Higueras
Daniel Higueras

Reputation: 2404

You should have 2 rows instead of 1. A row is designed to have 12 divisions of space. You are filling 12 and thus breaking the functionality. Here's a working example

HTML

 <div class="row filterRes">
    <div class='col-xs-6 col-sm-6 col-md-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepickerFrom'>
                <input type='text' class="form-control action" placeholder="Från" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-xs-6 col-sm-6 col-md-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepickerTo'>
                <input type='text' class="form-control action" placeholder="Till" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div></div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <button class="btn btn-primary  btn-block col-md-12  ">Filtrera</button>
    </div>
  </div>

----------- EDIT -----------------

After having the plunk example, I saw that it had to do with relative positioning of the columns. Fixed plunkr: https://jsfiddle.net/8mfe3f3a/1/

Upvotes: 3

AlexG
AlexG

Reputation: 5919

Adding a row:

I might be wrong but this might be a problem:

<div class="col-xs-12 col-sm-12 col-md-12">
    <button class="btn btn-primary  btn-block col-md-12  ">Filtrera</button>
</div>

change it to this, by adding a row:

<div class="col-xs-12 col-sm-12 col-md-12">
    <div class="row">
        <button class="btn btn-primary  btn-block col-md-12  ">Filtrera</button>
    </div>
</div>

each set of columns needs to be wrapped by a row, since rows clear the floating.

Removing the btn column

on the other hand your button does not need 12 columns, btn-block aready does that for you

<div class="col-xs-12 col-sm-12 col-md-12">
    <button class="btn btn-primary btn-block">Filtrera</button>
</div>

Upvotes: 2

Ijas
Ijas

Reputation: 93

Add a div with class Row

 <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
            <button class="btn btn-primary  btn-block col-md-12  ">Filtrera</button>
        </div>
    </div>

Upvotes: 1

Related Questions