Manipulating .container of Bootstrap to expand more horizontally

Question

I've included bootstrap from CDN, and then my style.css. I want to manipulate the width of .container class, but I don't want it to be fully get attached to the sides. I have read that if I include my custom style.css after the cdn fetch of bootstrap, I can manipulate the bootstrap.

col-md-12 gives me like this:

      [                                                                   ]

However, I want to expand it a bit more, but not like container-fluid. I just want to expand it horizontally just a little bit on each side. Like this:

   [                                                                          ]

What is the proper way to achieve this?

Edit:

This is what I want

This is what col-md-12 gives:

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Jul 07 '16 at 15:25
Images don't explain the problem. The container width is set by medai queres, just change those. — Paulie_D, Jul 07 '16 at 15:29

max · Accepted Answer · 2016-07-07T15:31:33.940

3

Good approach is to change this values (you can also use customizer provided by Bootstrap).

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

edited Jul 07 '16 at 15:31

answered Jul 07 '16 at 15:26

max

8,632
3
21
55

Thanks a lot! This solves the problem – senty Jul 07 '16 at 15:29

Manipulating .container of Bootstrap to expand more horizontally

1 Answers1