How to Expand a Bootstrap 3 Column to Be the Full Page Width When the Page Is Printed

How can I expand a Bootstrap 3 column to be the full page width when the page is printed?

There were at the moment of answering no helper classes in Bootstrap to do this.
When you want to accomplish such a thing, you can hide div's with css or
set the class of the second div with Javascript and change it from col-md-9 to col-md-12.
Or, see the answer with the 'print' class.

Bootstrap Printing and Column Resizing

I suggest something like:

@media print {  
   .col-print-12{
       width:100% !important;
   }
}

Then your HTML can be:

<div class="col-xs-6 col-print-12 bg-danger">
  Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
  Blue Column is hidden for print
</div>

!important is needed to override the regular col widths since at least one set will also apply at print width.

I updated your plunk using xs as a proxy for the print view here to demonstrate the concept. One red column in mobile, Red and Blue columns in tablet or bigger.

Bootstrap 3 columns change size depending on window size when page is loaded

I have modified your fiddle to include a CSS only version. You don't need any javascript in order keep similar height columns in bootstrap. See this in action over here: https://jsfiddle.net/ycs9psr3/2/

Related:

• Same height columns with bootstrap (various ways)
• Previous stack overflow discussion regarding column margins in bootstrap

        body {          background-color: #f6f6f6;          font-family: Verdana;          min-width: 540px;        }                .container {          background-color: white;        }                .sameSize {            display: flex;            flex-wrap: wrap;        }
        .sameSize > div[class*='col-'] {            display: flex;            flex-direction: column;            background-color: #b2dcf7;            background-clip: padding-box;            border: 10px solid transparent;            border-radius: 20px;        }                .well {          background-color: #b2dcf7 !important;          border:none !important;        }                .well > img {          margin-bottom: 30px;        }                .well > h4,        .well > p {          color: #16405b;        }                                

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row sameSize">    <div class="col-md-4 text-center">      <div class="well well-sm">        <img src="Images/example.svg" alt="Example" width="128" height="128">        <h4>Box 1</h4>        <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>      </div>    </div>    <div class="col-md-4 text-center">      <div class="well well-sm">        <img src="Images/example.svg" alt="Example" width="128" height="128">        <h4>Box 2</h4>        <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>      </div>    </div>    <div class="col-md-4 text-center">      <div class="well well-sm">        <img src="Images/example.svg" alt="Example" width="128" height="128">        <h4>Box 3</h4>        <p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>      </div>    </div>  </div></div>

Bootstrap 4 : how to print a column as full-width?

Try using just the col class on the second element to auto-fit it:

<div class="container-fluid">
    <div class="row">
        <div class="border d-none d-md-block col-md-4 col-lg-3 col-xl-2 d-print-none">
            Sidebar to hide when printing
        </div>
        <div class="border col">
            Main content to print
        </div>
    </div>
</div>

(I added the border class to make the elements visible in width)

How to change a column width for print vs. screen

Yes it is.

Add class col-print-12 to your col-sm-9 class.

Then add this to your css:

@media print {
    .col-print-12 { width: 100% }
}

Bootstrap 3 two columns full height

Edit:
In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)

---

The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

How to make image scale to full width on bootstrap column after transition to mobile view

Both the columns should have the same breakpoint (ie; md/sm) so that they become full-width at the same time...

   <div class="row">
     <div class="col-md-6 d-flex">
      <div class="align-self-center">
       <p class="lead font-weight-bold">sometext</p>
      </div>
     </div>
     <div class="col-md-6">
      <img class="img-fluid" src="someimage.jpg">
     </div>
   </div>

http://jsfiddle.net/dwnu5zjq/

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%;
    }
}

---

Related Topics