How to get Bootstrap grid spans narrower than span1?


Tags: html,css,twitter-bootstrap,grid

Problem :

I have a five column grid. I've initially set them up as so:

<div class="row">
    <div class="span1">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

The first column contains one of two icons, both of the same width: 18px. span1 resolves to 60px, however, so there's a lot of wasted space.

How do I declare a column that's 18px?

This only affects one page of my app, so it's not enough to customise the entire Bootstrap CSS, right?



Solution :

You can add your own class:

...
.myspan {
    width:18px;
    margin-right:52px;
}
...

Then add the class to your tag:

<div class="row">
    <div class="myspan">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

Or even use inline css (but it's less clean)

<div class="row">
    <div class="span1" style="width:18px;margin-right:52px">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

Every class containing "span" will get a margin-left of 30px and be set as float:left so you just need to specify the margin-right and width properties.

This is because of the [class*="span"] selector in bootstrap.css

In this example, I set a margin-right of 52px to keep the grid system, but you can change it to 10px if you don't want wasted space.


    CSS Howto..

    Cache policy, css/js/images how to make them not to load each time i do full postback?

    How can I get the second line of text to hide and show on hover? CSS only

    how to clip text in css like gmail does to emails subject listings

    how to write this code as link click animation

    how to change the background of a css-class by hover a button?

    how to show images with it's original smoothness in IE

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    How to capture hover events on css (less) box-shadow

    How to center this input using css only

    How to make one file compatible with different browsers?

    How to set the id of a 'label' HTML element?

    How can I delay the speed of hover purely via CSS3 for a div?

    How to change color of text based on the php condition [closed]

    How to make a background using CSS gradient with flat color?

    How to overlay a play button over a thumbnail image using only CSS

    How to make margins collapse evenly?

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    How to clone an element using class name and append it to the body

    How to use commas in a CSS variable fallback?

    how to set up responsive columns with pure CSS?

    How to center an image, make it act as an link and have an mouseover command?

    How to set session variable in jquery/css?

    How to know values of all attributes and properties of a tag element in HTML

    The tops of these links aren't working, how can I get the link inside just the buttons?

    How to design a Sass animation library that allows users to modify variables?

    How to change css on link current class

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    How to default toggle to open using css/jquery?

    How to create a Sass mixin for this CSS radial gradient?

    Django-Bower + Foundation 5 + SASS, How to configure?