How to Customize Bootstrap Column Widths

How to Customize Bootstrap Column Widths?

To expand on @isherwood's answer, here is the complete code for creating custom -sm- widths in Bootstrap 3.3

In general you want to search for an existing column width (say col-sm-3) and copy over all the styles that apply to it, including generic ones, over to your custom stylesheet where you define new column widths.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}

How can I change column widths in bootstrap when I only have access to CSS (no way for me to change the HTML)?

..and it expands the third column nicely on a regular screen but falls
apart on mobile as the 30% width is too small for the first column.

Perhaps I misunderstand the problem, but can you not just use media queries? BS4 use among other media queries these definitions (your CSS included) :

@media (min-width: 1200px) {
  .col-12.col-md-7 { max-width:30%; }
  .col-12.col-md-4 { flex-grow:5 !important; }
  .col-12.col-md-4 { max-width:70% !important; }
}

@media (min-width: 576px) {
  .col-12.col-md-7 { max-width: 60%; } /* perhaps 60% fits better */
  .col-12.col-md-4 { flex-grow:5 !important; } /* change other classes accordingly */
  .col-12.col-md-4 { max-width:70% !important; }
}

How to change Bootstrap column width to another size responsively?

Check the grid documentation from their site.

You can define multiple classes for the different breakpoints. If I understand you correctly you need something like this:

<div class="col-sm-3 col-xs-8 col-xs-offset-2">stuff</div>

This translates to: 3 columns on small devices (>= 768px) and 8 columns + 2 offset columns for extra small devices (< 768px). They also have col-md and col-lg- classes.

How to change bootstrap columns width

If you have 9 col-md-1 columns it is impossible since they cant be divided by 12 (grid system has 12 parts).

However, you can have 3 col-md-4 additional wrappers and put 3 col-md-4 columns inside each and that should give you the result you ask for.

Something similar to this:

 <div class="container-full">
         <div class="row clearfix">
    <div class="col-md-3 column well">
        <h2>
            Heading
        </h2>
        <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        </p>
        <p>
            <a class="btn" href="#">View details »</a>
        </p>
    </div>
    <div class="col-md-9 column">

        <div class="col-md-4">
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
            <div class="col-md-4">
                ...content...
            </div>
        </div>

    </div>
</div>

Edit: Fixed spelling mistake to wrapper col-md-3 => col-md-4

Custom column size on bootstrap (without affect responsive design)

If you want to keep using Bootstrap, you could define new columns widths, e.g. 0.5 / 12 and 7.5 / 12:

col-md-0-5 | col-md-7-5 | col-md-4
col-sm-0-5 | col-sm-7-5 | col-sm-4

If you check the bootstrap.css file, you can define the new col-md-0-5 and col-md-7-5 classes as follows:

.col-md-0-5, .col-md-7-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-md-0-5, .col-md-7-5 {
        float: left;
    }
    .col-md-0-5 {
        width: 4.16666667%;
    }
    .col-md-7-5 {
        width: 62.5%;
    }
}

Just follow the same logic to define the new col-xs-0-5 and col-xs-7-5 classes.

Bootstrap table custom width on each column

Give your table parent overflow: auto;

How can I change Bootstrap columns sizing based on screen size?

use col-x instead of col-xs-x. It was depreciated on bootstrap 4.

  <div class="row">
    <div class="col-4 col-sm-2">1</div>
    <div class="col-4 col-sm-2">2</div>
    <div class="col-4 col-sm-2">3</div>
    <div class="col-4 col-sm-2">4</div>
    <div class="col-4 col-sm-2">5</div>
    <div class="col-4 col-sm-2">6</div>
  </div>

---

Related Topics