2

I'm trying to convert an existing site (and make it responsive) using Bootstrap (4.3.1) - and learn Bootstrap as I go through it.

  • I have a top-Nav
  • then a middle portion - containing:
    • a Sidebar (on the left)
    • & page content on the right
  • then at the bottom a Footer.

But try as I might (& I've spend 2 days reading Bootstrap's examples, & Stack Overflow Qs) - I can't get the middle section to be same width as, and to line-up with, the header - without ridiculous amounts of css.

I'm sure/hopeful? there's a easy way ;) What am I not doing/doing wrong?

Here's my code (inline code/colors just to help me see where elements are)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body color="pink">
<!-- Page container -->
<div id="HomePage"class="container">
    <nav class="navbar sticky-top navbar-light bg-light">
      <a class="navbar-brand" href="#">Sticky top</a>
    </nav>
    <!-- Middle Section of the Page page -->
    <div class="container w-100 p-0">
        <div class="container row w-100 p-0">
            <!-- Start of left Sidebar -->
            <div class="col-1" style="background-color:yellow;">
                    Sidebar
            </div>
            <!-- Righthand side content -->
            <div class="col-11" style="background-color:green;">
                MAIN PAGE CONTENT
                <p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
            </div>
        </div>
    </div>
    <!-- Page Footer -->
    <nav class="navbar sticky-top navbar-light bg-light" color="blue">
      <a class="navbar-brand" href="#">Footer at bottom of page</a>
    </nav>
</div>  <!-- End of Page container -->
</body>
</html>

PS - Rationale: I need the middle portion full width, as on some pages there are images at top-right of the page that should line-up with right-hand edge of header, And the sidebar contains full width images, with almost no padding etc.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
user801347
  • 1,165
  • 3
  • 14
  • 28

2 Answers2

1

Just wrap each section of your website into a different row and then set grid columns to their inner divs, using col. Like so:

<div id="homePage" class="container">
    <header class="row">
        <nav class="col navbar sticky-top navbar-light bg-light">
            <a class="navbar-brand" href="#">Sticky top</a>
        </nav>
    </header>
    <div class="row">
        <div class="col-1" style="background-color:yellow;">
            Sidebar
        </div>
        <!-- Righthand side content -->
        <div class="col-11" style="background-color:green;">
            MAIN PAGE CONTENT
            <p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
        </div>
    </div>
    <footer class="row">
        <nav class="col navbar sticky-top navbar-light bg-light" color="blue">
            <a class="navbar-brand" href="#">Footer at bottom of page</a>
        </nav>
    </footer>
</div>
Nimantha
  • 6,405
  • 6
  • 28
  • 69
Lucas Arbex
  • 889
  • 1
  • 7
  • 15
  • I marked as 'accepted' But need to widen Col-1 a bit. Bootstrap examples (didn't help me) but found this: https://stackoverflow.com/questions/28750907/how-to-customize-bootstrap-column-widths - which I changed to my needs. Col-md-1 DID widen, BUT Col-1md-10half stacked BELOW (not alongside) /* widen col-1 */ .col-md-1half { ATinclude make-col-ready(); ATinclude media-breakpoint-up(md) { ATinclude make-col(1.5); } } .col-md-10half { ATinclude make-col-ready(); ATinclude media-breakpoint-up(md) { ATinclude make-col(10.5); } } 'AT' = AtSymbol – user801347 Oct 09 '19 at 17:27
  • @user801347 it is hard to understand what you are trying to do here on the comments. It is easier if you create another question. But regarding customizing the grid, you can simply increase the number of columns via sass variables. It is pretty straight forward, as you can see in the [official documentation](https://getbootstrap.com/docs/4.1/layout/grid/#customizing-the-grid) – Lucas Arbex Oct 09 '19 at 17:37
0

Add width:100% to the middle section. That should stretch the div to occupy 100% of the parent (in this case the container's) width which is also the same as the headers width

theincrediblethor
  • 448
  • 2
  • 9
  • I read that the class "w-100" should do that. But it doesn't seem to. I had already tried (as an experiment) adding an inline style of 'width:100% !important'. But it didn't work. – user801347 Oct 07 '19 at 17:39