Bootstrap 3.0: Fixed Column

Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes

There's really no easy way to mix fluid and fixed widths with Bootstrap 3. It's meant to be like this, as the grid system is designed to be a fluid, responsive thing. You could try hacking something up, but it would go against what the Responsive Grid system is trying to do, the intent of which is to make that layout flow across different device types.

If you need to stick with this layout, I'd consider laying out your page with custom CSS and not using the grid.

Bootstrap 3.0 : Fixed column

You will find the docs for the affix plugin here: http://getbootstrap.com/javascript/#affix wrap he elements you want to affix in a container div (b.e. with id="subnav").

Set the affix of this container by Javascript or Via data attributes.

javascript: $('#subnav').affix(); or
via data attributes: <div id="subnav" data-spy="affix">

Cause you don't want you elements overlap your fixed navbar you will have to set top offset. The top offset should be at least the height of your navbar.

If your design got a footer you will also set the bottom offset. Cause you don't want the affixed element overlap the footer.

Javascript: $('#subnav').affix({offset:{top:150,bottom:150}}); or
via data attributes: <div id="subnav" data-spy="affix" data-offset-top="150" data-offset-bottom="150">

Use CSS to affix the elements on the top of your documents: .affix{position:fixed;top:0px;}

More examples: https://github.com/twbs/bootstrap/pull/9902/files

Make column fixed position in bootstrap

Following the solution here http://jsfiddle.net/dRbe4/,

<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>

I modified some css to work just perfect:

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

Thanks @Lowkase for sharing the solution.

Bootstrap 3 Five column responsive with fixed height and width

You can Use flex display and set height:100% to .card-box

.ten-columns{
/*its like Bootstrap 4*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.ten-columns > .col-sm-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
.card-box {
/*add height:100% to .card-box*/
height: 100%;
}

How to force a fixed column width with a Bootstrap grid and keep the other ones fluid

Bootstrap's grid were meant to be fluid so they're supposed to change as the screen changes size.

For your desired layout, you can make it happen using display: flex or display:table instead. I'm going to go with display:table for my example since there's more support for it than the flexbox.

You will need to change your HTML to something like:

<div class="page">
  <div class="page-content">
    <div class="row">
      <div class="col-md-2">
        <div class="blue">test</div>
      </div>
      <div class="col-md-10">
        <div class="green">test</div>
      </div>
    </div>
  </div>
  <div class="sidebar">
    <div class="gold">test</div>
  </div>
</div>

And here's the CSS I used:

.page {
  display: table;
  width: 100%;
}
.page-content,
.sidebar {
  display: table-cell;
}
.sidebar {
  width: 330px;
}
.blue,
.green,
.gold {
  height: 50px;
}

.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.gold {
  background-color: gold;
}

You can checkout the fiddle here: https://jsfiddle.net/m0nk3y/qjutpze4/

Bootstrap 3 responsive table with first fixed column

I have edited your fiddle and did some changes like i removed display:inline-block and position and added fix width for that column so it will stay there.

.table>thead:first-child>tr:first-child>th:first-child
{
    height:auto;
    width:100px; /*change according to your need*/
}

For more details please check this link .

Same fixed column height for all columns in a row with bootstrap 3

Here is a working Fiddle.

While using bootstrap, you need to always need to make some changes according to your need. You can override the bootstrap style by applying your own styles through classes to DOM elements.

You need to define panel height in your css so that your tiles will get the same height.

As you have already written a lot of css in your page, so I use all or your 'css' and made some changes in it.

---

Related Topics