CODEWITHSUNDEEP
csstwitter-bootstrapposition
Faisal Alvi
Faisal Alvi

Reputation: 532

How to fix an element within a bootstrap container?

I have a fixed a button at the right of a bootstrap container.

But in high resolution, the button moves outside of the bootstrap container as it is fixed relative to body, not container.

Note: It must be fixed (not absolute) because I don't want it to scroll with window.

Here is the code:

   <div class="body">
    <h1>Body</h1>
      <div class="container">
      <h1>Container</h1>
        <a href="#" class="fixed-btn">Enquire Now</a>
      </div>
    </div>

CSS:

.fixed-btn {
  padding: 10px 20px;
  background: #000;
  color: #FFF !important;
  text-decoration: none !important;
  line-height: 30px;
  position: fixed;
  right: 70px;
  top: 50px;
}

.body {
  background: aquamarine;
  min-height: 1000px;
}

.container {
  background: antiquewhite;
  min-height: 1000px;
  max-width: 400px;
}

Is it possible to make it fixed within a bootstrap container? so it would not move outside of the container.

Look a live code at JSFIDDLE.

Upvotes: 2

Views: 2180

Answers (1)

Paulie_D
Paulie_D

Reputation: 115174

One possibility is to position the fixed element using calc

.fixed-btn {
  position: fixed;
  left: calc(50% + (400px/2)) ;
}

In this case the 400px (from your demo) would be the width of the container based on the various widths in Bootstrap.

You would have to adjust this in each media query.

JSfiddle Demo

Upvotes: 2

Related Questions