Reputation: 29163
I have a 2 column grid (actually, some rows have 2 columns in an otherwise 5 column grid). I'm trying to make the first one as narrow as possible and giving the rest of the length to the other. Nesting doesn't work because I only have 2 columns.
Basically, I want something like col-xs-0.5
or better yet, solution that will make the first column just wide enough to fit the *
Here is an example: https://jsfiddle.net/4jcL24ze/8/
<div class="container">
<div class="row">
<div class="col-xs-1">*</div>
<div class="col-xs-11">some long description</div>
</div>
</div>
Upvotes: 8
Views: 7560
Reputation: 32355
Narrow Column
You can use custom classes for your layout. Since .col-xs-0.5
is half of col-xs-1
, you can use 8.33/2 = 4.166%
and similarly subtract width from col-xs-11.5. But this is only for narrowing the column and is not needed if you need to fit the asterisk with the text description.
Fitting *
with the description
I am not sure why you need to separate *
to a new column when you can have it inside the text of col-xs-12
like this: JSfiddle
.col-xs-05, .col-xs-115 {
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.col-xs-05 {
width: 4.166%;
}
.col-xs-115 {
width: 95.33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-05">*</div>
<div class="col-xs-115">some long description</div>
</div>
</div>
Upvotes: 5