Home/ Questions/Q 8987997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T21:55:23+00:00

I have a five column grid. I’ve initially set them up as so: <div

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0