Make bootstrap container have only left margin

Question

Is there a way to make bootstrap container have margin on only one(left) side?. I want the right side to stretch till end of screen... please help...

@MrLister yeah tried. entire container moves to right if i add margin-right 0 — Mr.Gaja, Dec 19 '17 at 09:32
For future readers using Bootstrap 4: https://stackoverflow.com/questions/56778466/right-aligned-bootstrap-container-which-also-aligns-with-default-container — Carol Skelly, Jun 26 '19 at 18:11

score 5 · Answer 1 · answered Apr 12 '19 at 10:41

From your query, what I understand is that you need the left border the container to be as is, but right border of the container to be stretched to right edge of the browser window. I am posting a fiddle below. Please check if it works for you.

https://jsfiddle.net/rhythm19/27x014oc/

Bascially, this is what you will need to add to get a right edged container.

@media (min-width:768px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 375px);
  }
}

@media (min-width:992px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 485px);
  }
}

@media (min-width:1200px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 585px);
  }
}

score 2 · Answer 2 · edited Apr 07 '22 at 11:49

With Css3 you can use the calc function to find the correct width for your align right container.

Something like this should work :

.container-right {
  padding-left: 15px; //-> Add the default container padding on the left
  margin-left: auto; //-> Align your container to the right
  width: calc(1199px + (50% - 1199px / 2)); //-> The container width is based on the current breakpoint bootstrap container width
}

Then just duplicate this for every bootstrap breakpoint (575px / 767px / 991px / 1199px / 1599px)

Elvin Mammadov · Answer 3 · 2017-12-19T09:47:23.353

1

Just change .container css properties like:

.container {
    margin-right: 0;
    margin-left: auto;
}

If you want container don't moves to the right you must change container width 1170px to 1260px (if you used Bootstrap 3) Try this

@media (min-width: 1200px){
    .container {
       width: 1260px;
    }
}

edited Dec 19 '17 at 09:47

answered Dec 19 '17 at 09:32

Elvin Mammadov

1,110
7
16

Yes because you have static container width and if you want container don't moves to the right you must up your container width. Let me I'll update answer – Elvin Mammadov Dec 19 '17 at 09:44

score 1 · Answer 4 · answered Dec 19 '17 at 10:00

1

First, the .container doesn't have margin.

Also I would start with the .container-fluid like so:

.container-fluid {
  width: auto !important;
  margin-right: 0 !important;
  margin-left: 25% !important;
}

.inner {
  background: brown;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="inner">Container</div>
</div>

Example: https://jsfiddle.net/wk0yeny5/

answered Dec 19 '17 at 10:00

Ron van der Heijden

14,803
7
58
82

still container is moving to right.. (Iam using bootstrap 3.3.7) – Mr.Gaja Dec 19 '17 at 10:17
1

Can you post a screenshot of what you're trying to accomplish? This answer seems to do exactly what you're asking, or you need to rephrase your question... – McVenco Dec 19 '17 at 10:41
I want the container(one with margin-right 0) to align with the normal container... In the jsfiddle link in my above comment the container is moved to right – Mr.Gaja Dec 19 '17 at 11:38

score 0 · Answer 5 · answered Feb 09 '19 at 04:55

I had the same problem. The Bootstrap fluid container looks great on small screen, or inside CodePen where the code window is taking up the gutter on the left, but once you go full screen, the lack of a left margin is quite ugly.

Luckily Bootstrap has a built in way of dealing with this.

Just use col-xx-offset-*

For example:

<div class="row">
   <div class="col-md-11 col-md-offset-1">...</div>
</div>

When your screen is small, the left gutter disappears, and you only see it when in full screen.

This article was most useful in finding that solution: https://www.sitepoint.com/understanding-bootstrap-grid-system/

score 0 · Answer 6 · answered Jul 14 '19 at 21:03

Best way is create and use half container box

@media (min-width:768px) {
  .container-half {
    width: 360px;
  }
}
@media (min-width:992px) {
  .container-half {
    width: 480px;
  }
}
@media (min-width:1200px) {
  .container-half {
    width: 570px;
  }
}

Make bootstrap container have only left margin

6 Answers6