× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

How to make only one column fluid in bootstrap

Zach Saucier
Feb 02, 2015
<p>There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a couple ways</p> <ol> <li>Use <code>calc()</code> (or the JavaScript equivalent) - <a href="http://www.bootply.com/A2bOZLbWW9" rel="nofollow">Demo</a></li> </ol> <p>That'd look like this:</p> <pre><code>&lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="fixed-side-column"&gt; &lt;!-- I want this column to be fixed. --&gt; &lt;/div&gt; &lt;div class="fluid-middle-column"&gt; &lt;!-- I want only this column to be fluid. --&gt; &lt;/div&gt; &lt;div class="fixed-side-column&gt; &lt;!-- I want this column to be fixed. --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; /* CSS */ .row &gt; div { float:left; /* Can apply this a bunch of ways */ } .fixed-side-column { width:250px; } .fluid-middle-column { width:calc(100% - 500px); } </code></pre> <ol start="2"> <li>Use absolute positioning and padding on the middle element to remove the need for any calculations - <a href="http://www.bootply.com/5LeoNY36mo" rel="nofollow">Demo</a></li> </ol> <p>You'd have to change the markup some</p> <pre><code>&lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="fluid-middle-column"&gt; &lt;!-- I want only this column to be fluid. --&gt; &lt;/div&gt; &lt;div class="fixed-side-column"&gt; &lt;!-- I want this column to be fixed. --&gt; &lt;/div&gt; &lt;div class="fixed-side-column right"&gt; &lt;!-- I want this column to be fixed. --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; /* CSS */ .fixed-side-column { width:250px; float:left; } .right { float:right; } .fluid-middle-column { position:absolute; z-index:-1; top:0; left:0; width:100%; padding: 0 250px 0 250px; } </code></pre> <p>You'll need to add custom media queries to handle what happens when the screen is getting small.</p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/26187995/How%20to%20make%20only%20one%20column%20fluid%20in%20bootstrap/26187996">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus