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..

    How to add multiple attributes in CSS in input element [duplicate]

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    How can I create alike css classes [duplicate]

    how to use text-indent only with element not ont it's :before Selector?

    How to load self hosted font files if the GoogleFont service is unavailable?

    How to create a responsive top bar with CSS

    How to make a stable two column layout in HTML/CSS

    How to ensure both scale and slide up can occur for dynamic text using css and js?

    How to remove scrollbar in PrimeFaces dialog?

    How to implement this to my index.html?

    How to stop browser resizing 1px wide image to 0px

    How To select a specific Div from its Class with JS

    How can I clip and transform an image, adding rounded corners and perspective?

    How to select via regex all class notations in css file

    How to set the background image of an DIV in CSS?

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    Google Chrome Package Apps : How to make transparent rounded background like google hangout app?

    How to make CSS Column Design quickly?

    How to customize style of numeric “li” in css [closed]

    Using javascript to show html on every page except one page

    How to do automatic reload of page when viewed in iPad Portrait mode?

    How to render text in .NET in the same size as browsers does given CSS for the text

    How to make full width image responsive? (no scale / stretch)

    How to add css to a single mvc Helper method when validation fails - from within the model

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    how to cope with text to element alignment issues

    jquery/css how to rescale and crop a large image to fit my display div?

    How to add rows to a responsive grid

    How can I style a disabled button in a Windows 8 JavaScript app?

    How to make a white square around my form fields?