Inspiring

Question

Constrain total width of Bootstrap site?

Forum|Forum|6 years ago
July 2, 2019
5 replies
644 views

Hi. I'm customizing a Bootstrap template trying to teach myself Bootstrap. Is it possible to set the max-width of the page? When I try to set the max-width in css under the body tag it only affects the width of the main section for some reason, not the whole page. I am trying to constrain the whole page to be only 75% of the available screen space.

Here is a link to the files:

https://drive.google.com/open?id=1UGeCe2TcsXVCEO_ReNsOoCNFXInnfU54

Thanks in advance!

This topic has been closed for replies.

warpigs666Author

Inspiring

Thanks for you help everyone (except the person who said 'it looks fine the way it is...'

I'm still working on this and will report back.

BenPleysier

Community Expert

Have a look at using position: sticky instead of position: fixed. See for more: How to make a sticky sidebar with two lines of CSS - DEV Community ‍ ‍

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

warpigs666Author

Inspiring

Thanks all. I don't really know how to answer the questions. Like I said I'm learning bootstrap. I believe I'm using 4.3.1

None of the above code works. When I add <body class="container-fluid w-75"> as mentioned above it just cause the main section of the page to go crazy. Here's a link to the template if you don't want to download my files:

https://startbootstrap.com/themes/resume/

Nancy OShea

Community Expert

Why do you think it needs additional constraining? It looks fine to me the way it is.

If you're not seeing it this way (see screenshot), check your code for validation errors.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Which version of Bootstrap are you using? It matters a lot because older Bootstrap uses different classes and layout methods.

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

Add the following two classes to the body tag

<body class="container-fluid w-75">

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

warpigs666Author

Inspiring

That didn't work any other ideas?

Nancy OShea

Community Expert

I don't download files from untrusted sources, sorry. If you care to upload your work in progress to a remote server you control, I'll be happy to look at the site online with my browser.

Bootstrap has 2 container classes.

container-fluid = full screen

container = partial & centered.

Wrap your content inside

CONTENT GOES HERE....

</div>

Nancy O'Shea— Product User & Community Expert

warpigs666Author

Inspiring

Ok I'll do that if no one else knows how to fix it thanks.

P

Paul-M

Legend

assuming the layout uses container-fluid I'd have though you could add a css rule something like this:

.container-fluid { margin: 0 auto; max-width: 1920px }

Paul-M - Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded