CODEWITHSUNDEEP
csstwitter-bootstrap
IttayD
IttayD

Reputation: 29163

Narrow column in Bootstrap

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

Answers (1)

m4n0
m4n0

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>

JSfiddle Demo

Upvotes: 5

Related Questions