using col-* that use position fixed in container

Question

I am trying to do implement a design, that have a container, in it the are 2 columns, one is col-lg-8 and one is col-lg-4 with fixed position.

i understand that the affix is relative to the whole page. " what i don't understand is:

How can i set it to be col-lg-4 (it is going more then that)?

<div class="container">
<div class="row">
    <div id="designer" class="col-lg-8">
       Content
    </div>

    <div class="col-lg-4">
        <div class="affix">
            Fixed content
        </div>
    </div>
</div>

As you can see, the right column is more then the container, I am trying to place it inside of the container- so it will be centered with all content

Any chance you have an example of what you are trying to achieve? — kevin b., May 17 '17 at 07:56
could you use the embedded tool for html/js to show your code? maybe use border-color and border-style: solid for explaining better your problem — Edwin, May 17 '17 at 07:57
col-lg is activated on large screen device try using col-md-4 or col-sm-4 — Nadir Laskar, May 17 '17 at 08:36
@kevinb. i have added an image that is showing what i meant, is it ok? — E.Meir, May 17 '17 at 08:50
i need the right column to be `position: fixed` so it will scroll with the entire page — E.Meir, May 17 '17 at 08:51

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

I answered a similar question recently: Fixed column using CSS

While my answer there was for the left column to be fixed, the solution for your situation will be something like this, I assume? Let me know if it doesn't suit your needs.

EDIT (using bootstrap col-* classes)

Since OP asks the explicit use of the bootstrap col-* classes, please see the updated snippet:

PS: you can adjust the paddings in the .section CSS rules

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
}

.section {
    padding: 5% 5% 5% 5%;
}

#right {
    background-color: aquamarine;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    box-sizing: border-box;
}

#right {
    background-color: beige;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<div id="left" class="section col-xs-8">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
    <div id="right" class="col-xs-4 section">
        <div>
           This should not scroll 
        </div>
    </div>
    
</div>

Thanks, but i want to use the bootstrap col-* classes, 2 columns in a container the the right column will be `position: fixed`. Can it be done? — E.Meir, May 17 '17 at 11:11

using col-* that use position fixed in container

1 Answers1