CODEWITHSUNDEEP
cssbootstrap-4
David
David

Reputation: 5537

Set Margin for container

Hi I have a container.

The .container-fluid is too large as it takes the entire screen and looks a little off and .container is too small.

How can I adjust the size of the container. I see the margins are pretty high but if I try to adjust it breaks my re-sizing.

What is the correct way to change the size of the container.

Thank you

Upvotes: 0

Views: 2953

Answers (2)

Chapter2
Chapter2

Reputation: 102

Just add a second class to the container-fluid element. Just name the class as you like.

<div class="container-fluid container-fluid-w1000"></div>

.container-fluid-w1000 {
  max-width: 1000px;
}

Left and right margins are pretty high, since margin-left; auto and margin-right: auto are responsible for the horizontal centering of your div-element.

It's best practice to not modify the bootstrap basic classes. You save yourself quite some time later on.

Upvotes: 1

fer sid
fer sid

Reputation: 31

I think you are saying that a container vs container-fluid is the difference between responsive and non-responsive to the grid. This is not true...what is saying is that the width is not fixed...its full width!

This is hard to explain so lets look at the examples

Example one

container-fluid:

http://www.bootply.com/119981

So you see how the container takes up the whole screen...that's a container-fluid.

Now lets look at the other just a normal container and watch the edges of the preview

Example two

container:

http://www.bootply.com/119982

Now do you see the white space in the example? That's because its a fixed width container ! It might make more sense to open both examples up in two different tabs and switch back and forth.

Upvotes: 0

Related Questions