0

In my application I have my grid column classes specified like this:

<div class="row">
    <div class="form-group">
        @Html.HiddenFor(m => m.Team.TeamId)
        @Html.Label("Add Player: ", new { @class = "col-xs-12 col-sm-4 col-md-3 control-label" })
        <div class="col-xs-6 col-sm-4 col-md-3">
            @Html.DropDownListFor(m => m.AddNewPlayerId, new SelectList(Model.AllPlayers, "PlayerId", "DisplayName"), new { @class = "form-control" })
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            @Html.DropDownListFor(m => m.TeamMemberTypeId, new SelectList(Model.TeamMemberTypes, "TeamMemberTypeId", "Name"), new { @class = "form-control" })
        </div>
        <div class="col-xs-12 col-sm-4 col-md-3">
            <input type="submit" value="Add Team Member" class="btn btn-primary" />
        </div>
        <div class="col-xs-12 col-sm-3 col-md-2">
            <a href="/Player/AddNewPlayer" class="btn btn-primary">Create New Player</a>
        </div>
    </div>
</div>

As you can see, I've got them setup as

col-xs-12, col-sm-4, ...
or
col-xs-6, col-sm-4, ...

My problem is, according to the Bootstrap 3 specs, it should break from xs to sm at 480px, but mine isn't breaking until either 751 or 752px. Where do I go o find out if my breakpoints didn't get changed somehow, or how to find out why they are breaking at the incorrect dimensions?

codingrose
  • 15,563
  • 11
  • 39
  • 58
ganders
  • 7,285
  • 17
  • 66
  • 114

2 Answers2

1

According to Bootstrap 3 documentation, the .xs to .sm breackpoint is set to 768px (with a max container width of 750px, which fit to your "751 or 752px").
To ensure it, you can do a quick search on bootstrap.css, and you'll see there's not a single 480px value.

I'm not sure, but I think you're reading Bootstrap 2 documentation. This is the only place where we can find the 480px breackpoint (Scaffolding paragraph). This one has been removed from Bootstrap 3 as it now better fit to mobile use and use fluid columns.

zessx
  • 68,042
  • 28
  • 135
  • 158
  • Good catch. I've got the Bootstrap 3 page bookmarked so I guess I'm not sure where I read the 480px breakpoint. Aha, just found where I read it, it's actually a SO post, but it must be a typo...http://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries. Edit: I guess I should have read further on the post/question, they talk about the 480px portion more. – ganders Jan 10 '14 at 14:08
-1

All break point columns (e.g. - col-sm), should equal no more than 12 when added together.

For example:

<div class="form-group">
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
            Col1
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2">
            Col2
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2">
            Col3
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2">
            Col4
        </div>
    </div>
</div>

As well I would put the "row" div inside the "form-group".

The example lays out out the following:

  1. col-xs breakpoint (smartphones) - 4 columns each a 3 = 12
  2. col-sm breakpoint (tablets) - 4 columns each at 3 = 12
  3. col-md breakpoint (desktop) - 2 columns at 3, 1 column at 4, 1 column at 2 = 9
Lowkase
  • 5,631
  • 2
  • 30
  • 48
  • The col's tell bootstrap how many of the 12 columns you want to consume. They do NOT have to add up to 12 for a particular form-group. – ganders Jan 10 '14 at 04:57
  • That's true, but the maximum is 12 columns per row. I change the answer to reflect that. – Lowkase Jan 10 '14 at 04:58
  • Yes, and specifying col-xs-12 col-sm-4, etc for the SAME element does not add them together. It's saying "when it's a smartphone, take all 12 columns, OR if it's a tablet, then only take up 4 columns, etc" – ganders Jan 10 '14 at 04:59
  • Regardless, the OP was blowing past the 12 col limit for each breakpoint that was setup. – Lowkase Jan 10 '14 at 05:01
  • that's true, it's an easy way of having the elements automatically move to a new row on the page ONLY when it's for smaller devices. – ganders Jan 10 '14 at 05:03