How do i evenly space my 5 pairs of elements, for a small screen width, in bootstap 3?
I have 5 pairs of controls that I want to have spaced evenly when the user's browser window is small (sm). I'm very close but need to find a way to either shrink the 4th pair of elements or grow (widen) the fifth pair. Right now it raps the data of the fifth pair on the line below, when the user's browser window is small. Any suggestions?
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-3">
<span class="text-right detail-label-black">Year:</span>
<asp:Label runat="server" ID="lblYear" class="detail-data-bold-black" />
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<span class="text-right detail-label-black">Make:</span>
<asp:Label runat="server" ID="lblMake" class="detail-data-bold-black" />
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<span class="text-right detail-label-black">Model:</span>
<asp:Label runat="server" ID="lblModel" class="detail-data-bold-black" />
</div>
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<span class="text-right detail-label-black">Mileage:</span>
<asp:Label runat="server" ID="lblMileage" class="detail-data-bold-black" />
</div>
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-3">
<span class="text-right detail-label-black">VIN:</span>
<asp:Label runat="server" ID="lblVIN" class="detail-data-bold-black" />
</div>
</div>
</div>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can nest rows in Bootstrap, so what if you create an outer row where the columns have a 60/40 split, say, and the first three fields go in the left column, and the remaining fields go in the right column. Within each of those columns, you define additional rows (1 per column). Within those rows, the max columns is still 12, so divide 12 by the number of fields you put in that column. Each of the fields will go into its own inner column.
You might need to play around with it, but 60/40 is probably a good starting point.
You might need to play around with it, but 60/40 is probably a good starting point.
Somehow I doubt Bootstrap is intended to increase cases of divitis. A framework is supposed to be a help, not a limitation.
ASKER
thanks
ASKER