How to adjust Bootstrap's container div to 100px off the left viewport edge?

Question

I'm using the Twitter Bootstrap fixed layout where the container div has:

margin-left: auto;
margin-right: auto;

So it always stays in the center.

What I want to do is position the container so that there is a 100px gap between the left browser window border and the container. When the window gets smaller I want the container move to border of the window.

How can I achieve this?

score 4 · Answer 1 · answered Sep 07 '16 at 15:32

An alternative to changing the margins of the container is to use container-fluid an only use 8 (or 10) of the 12 columns on larger screens...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
         .. page layout here
        </div>
    </div>
</div>

http://www.bootply.com/SRnhM22tPr

score 2 · Answer 2 · answered Jun 19 '12 at 14:01

2

Overwriting the twitter bootstrap css file's .container to have margin-left: 100px solves the problem of positioning it closer.

As for moving it closer when the window gets smaller, I have no idea how it could be done with css so that the maximum is 100px. But without the maximum it is doable with margin-left: x% where x is the number you see fit. That way when the browser window size changes, so does the left margin.

Hope this helped.

answered Jun 19 '12 at 14:01

jakee

18,486
3
37
42

Yea I tested that too. But the problem really is that I want it to move to the border as soon as the window size hits the border of the container content – Mexxer Jun 19 '12 at 14:09
you'll have to use something like jquery for that and the modify the css walue of the `margin-left` – jakee Jun 19 '12 at 14:24

score 0 · Answer 3 · answered Jun 19 '12 at 14:03

0

Use the fluid layout and add padding to the body.

body { padding-left: 100px; }

That way the content will always fill the window up to 100px from the left hand side.

answered Jun 19 '12 at 14:03

Terry

14,099
9
56
84

I don't really want to use the fluid layout. Just the 940px container with the correct adjusted postition – Mexxer Jun 19 '12 at 14:08
Why? What you're asking for is the very definition of fluid. "When the window gets smaller I want the container move to border of the window." – Terry Jun 19 '12 at 14:11
1

Got it now ;) used a simple media query – Mexxer Jun 19 '12 at 14:48
1

Cool, just be aware that IE6,7 & 8 don't support them. But those users should be cursed anyways :) – Terry Jun 19 '12 at 15:01

Mexxer · Accepted Answer · 2012-06-19T18:51:18.540

0

Ok here's what I did:

.container {
  padding-left: 10px;
  padding-right: 250px;
}

doesn't give me exactly the result I was looking for, but pretty close. My first span 3 is a sidebar and the last span9 main content area. The main content area is now always centered and the sidebar next to it and has a minimum gap of 10px to the window border.

edited Jun 19 '12 at 18:51

answered Jun 19 '12 at 14:48

Mexxer

1,699
5
27
40

How to adjust Bootstrap's container div to 100px off the left viewport edge?

4 Answers4

Linked