Highlighted

Constrain total width of Bootstrap site?

Participant ,
Jul 02, 2019

Copy link to clipboard

Copied

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!

Views

211

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Constrain total width of Bootstrap site?

Participant ,
Jul 02, 2019

Copy link to clipboard

Copied

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!

Views

212

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 02, 2019 0
Adobe Community Professional ,
Jul 02, 2019

Copy link to clipboard

Copied

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

<div class="container">

<div class="row">

<div class="col">

        CONTENT GOES HERE....

</div>

</div>

</div>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 1
Participant ,
Jul 02, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 0
Adobe Community Professional ,
Jul 02, 2019

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 1
Adobe Community Professional ,
Jul 02, 2019

Copy link to clipboard

Copied

Add the following two classes to the body tag

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 1
Participant ,
Jul 02, 2019

Copy link to clipboard

Copied

That didn't work any other ideas?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 0
Adobe Community Professional ,
Jul 02, 2019

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 1
Participant ,
Jul 08, 2019

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 0
Adobe Community Professional ,
Jul 08, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 0
Adobe Community Professional ,
Jul 08, 2019

Copy link to clipboard

Copied

This is where the problem starts

#sideNav {

    text-align: center;

    position: fixed;

    top: 0;

    left: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    width: 17rem;

    height: 100vh;

}

As long as the sidebar has a fixed position, there is very little that you can do about the rest of the layout. In other words, you can make the main area narrower, but the sidebar will always cling to the left and top of the browser window. The best you can do is to make the main window narrower by wrapping this into a container as in

<body id="page-top">

  <div class="container">

      ........ (rest of code)

    </section>

  </div>

  </div>

  <!-- Bootstrap core JavaScript -->


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2019 0
Participant ,
Jul 13, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2019 0
Adobe Community Professional ,
Jul 13, 2019

Copy link to clipboard

Copied

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   ‍    ‍ 


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2019 1