How to make fixed position row in bootstrap?

Question

I have a table-like structure, where the first <div class="row">... behave as the header for the table.
I am trying to make it fixed, so when I scroll down the page, users can still see the columns headings.
I gave it position:fixed, which achieves that, but now, the width of the columns is trashed.

<div class="container">
            <div class="row" style="position:fixed;">
                <div class="col-md-1">id</div>
                <div class="col-md-3">L Name</div>
                <div class="col-md-1">M</div>
                <div class="col-md-2">F Name</div>
                <div class="col-md-3">Username</div>
                <div class="col-md-2">Phone</div>
            </div><!-- row -->
<!-- some data -->
            <div class="row">
                <div class="col-md-1">id</div>
                <div class="col-md-3">L Name</div>
                <div class="col-md-1">M</div>
                <div class="col-md-2">F Name</div>
                <div class="col-md-3">Username</div>
                <div class="col-md-2">Phone</div>
            </div><!-- row -->
</div>

I really needs this to work on Chrome/FF/Safary. IE is not a concerns

See the first answer here: http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container — Carol Skelly, Mar 06 '14 at 15:43

user1809655 · Accepted Answer · 2014-03-07T02:44:30.047

7

Try it <div class="container" style="position: fixed"> EDIT: I create simple example at http://jsfiddle.net/ytJV7/2/

edited Mar 07 '14 at 02:44

answered Mar 06 '14 at 15:38

user1809655

131
6

Or positioning header to 'absolute' – user1809655 Mar 06 '14 at 15:41
I need the top of the grid to stay at the same place when I scroll down. Not the entire container to stay, as I am scrolling that container – Itay Moav -Malimovka Mar 06 '14 at 16:06

Aleš Pázner · Answer 2 · 2022-09-14T14:10:47.523

0

There is also sticky-top class in bootstrap CSS

Fiddle with example

<div class="container">
        <div class="row sticky-top bg-white">...

edited Sep 14 '22 at 14:10

answered Sep 14 '22 at 14:05

Aleš Pázner

25
7

How to make fixed position row in bootstrap?

2 Answers2

Linked