How to implement a fluid-fixed-fluid three column layout with Bootstrap?

Question

In one project I need to implement a 3-columns-layout with a fixed sized column in the middle and two further columns with a variable width (each min = 100px and max = /100% - 500px) / 2):

3-columns-layput

(How) Can this be implemented on using Twitter Bootstrap?

score 0 · Answer 1 · edited May 23 '17 at 12:13

It seems, that Bootstrap doesn't provide an instrument to implement such a mixed fixed-fluid layout. One has to use a workaroud like this (found here, see also http://jsfiddle.net/kizu/UUzE9/):

CSS

#main {
    min-width: 500px;
    padding: 0 500px 0 0;
    white-space: nowrap;
    overflow: hidden;
}

.main-column {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

#main-column-left {
    width: 50%;
    background: #00FFB4;
}
#main-column-middle {
    width: 500px;
    background: #434343;
}
#main-column-right {
    width: 50%;
    background: #FF9000;
}

.content {
    white-space: normal;
}

HTML

<div id="main">
    <div class="main-column" id="main-column-left"><div class="content">
        Lorem ipsum dolor sit amet...
    </div></div>
    <div class="main-column" id="main-column-middle"><div class="content">
        Lorem ipsum dolor sit amet...
    </div></div>
    <div class="main-column" id="main-column-right"><div class="content">
        Lorem ipsum dolor sit amet...
    </div></div>
</div>

But it's not a solution. So if someone knows a bootstrap conform way, please feel free to post it.

How to implement a fluid-fixed-fluid three column layout with Bootstrap?

1 Answers1