CODEWITHSUNDEEP
twitter-bootstrap
tylerbarton
tylerbarton

Reputation: 43

Bootstrap grid, clearly I'm doing something wrong

I have a few forms on a page. I have the controls grouped so there are two columns. My expectation is that when I collapse my browser to simulate smaller screens the columns would collapse into a single column but all that happens is that the controls shrink in width and never collapse.

<div class="container">

  <form name="onlineevent" method="post">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">
        <p>
          <input style="height: 54px;" type="text" name="onlineeventname" placeholder="Online Event Name">
        </p>
      </div>
      <div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">
        <p>
          <input style="height: 54px;" type="text" name="onlineeventdetails" placeholder="Online Event Details">
        </p>
      </div>
  </form>
  </div>

Upvotes: 0

Views: 54

Answers (2)

Rahul.A.Krishna
Rahul.A.Krishna

Reputation: 98

The reason why they don't shrink into single column is that you specified it to take up 6 out of 12 in all the screens. That is, it takes half the space in all screen sizes.

To fix it replace

col-xs-6 col-sm-6 col-m-6 col-lg-6 with

col-xs-12 col-sm-12 col-md-6 col-lg-6 Here it will take 12 out of 12 in small and extra-small screens.

Notice that you also wrote m instead of md.

Upvotes: 2

Silvio Delgado
Silvio Delgado

Reputation: 6975

You're writing:

<div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">

But should write:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> // note the "md"

Anyway, you can write just:

<div class="col-xs-6">

Because all of your columns have the same width.

Upvotes: 0

Related Questions