CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SpaceCowboy74
SpaceCowboy74

Reputation: 1407

Can I make a Label left align when screen size is small with Bootstrap?

I'm pretty new with bootstrap. I am trying to lay out a form with the following Razor Code:

    <div class="form-group">
        <div class="col-md-12">
            <div class="col-md-3">
                @Html.Label("Work Order Type", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-4">
                @Html.DropDownListFor(m => m.Step2.WorkOrderType, Model.Step2.WorkOrderTypeList, new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.Label("Site", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-3">
                @Html.DropDownListFor(m => m.Step2.Site, Model.Step2.SiteList, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3">
                @Html.Label("Billing Account", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-4">
                @Html.DropDownListFor(m => m.Step2.BillingAccount, Model.Step2.BillingAccountList, new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.Label("Priority", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-3">
                @Html.DropDownListFor(m => m.Step2.Priority, Model.Step2.PriorityList, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3">
                @Html.Label("Require Signature?", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-2">
                @Html.CheckBoxFor(m => m.Step2.ReqSignature, new { @class = "checkbox" })
            </div>
        </div>
    </div>

The problem is, when i resize the screen, the form items drop down below the labels, but the labels stay right text aligned. Is there some way to change the alignment to left once the screen gets to small or below?

Upvotes: 1

Views: 1428

Answers (1)

lvarayut
lvarayut

Reputation: 15229

Basically, you could check the size of the screen, and then, align the text as you wish. Twitter bootstrap has 3 media queries:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

So, you could do as following:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
   .control-label{
      text-align: left; 
  }
}

You can see more details on the Grid system, Media queries.

Upvotes: 2

Related Questions