Alignment issues

[pyxxel]

Continuing the discussion from Bootstrap basic layout -what/how to learn? - #9 by pyxxel.

Yup, the above pen worked

But moving on…
thinking about the contents it makes more sense to put the carousel and 3 cards to go into the contents-column (right hand side) instead. Along with all sorts of other contents (text, images, illustrations, tables, video) I’ve made an attempt below which mostly works, but some things are still not quite right:

1. things don’t align properly. And for some reason the boxes jump below each other if I make the total 12 as I understand I should. If I make the total 11 (as they’re now shown) or less it works OK, but that’s not right.

2. I’m a little unsure about the “container” class <div class="container">
   From what I’ve read this should define the page contents but not the header and footer. And I’ve also gathered that for most cases <div class=container-fluid> isn’t the one to go for. Can someone please clarify how and where to use this class in a setup like this?

Any other obvious things I need to fix before proceeding to add the actual content and styling it appropriately?

[PaulOB]

@PaulOB

.sidenavbar{
  position:-webkit-;
  position:sticky;
  top:0;
}

I’ll answer your question tomorrow as just offline now but wanted to correct this mistake of mine

There’s a missing value in that rule. It should be this:

.sidenavbar{
  position:-webkit-sticky;
  position:sticky;
  top:0;
}

Sorry about that

[PaulOB]

@pyxxel

things don’t align properly. And for some reason the boxes jump below each other if I make the total 12 as I understand I should.

Don’t mess about with the margins and padding on rows and columns and containers.

You set the margin on all columns to 0.1rem.

/* size-defined content boxes */
[class*='col-'] {
  background-color: lavender;
  border-radius: 0.3rem;
  /* margin: 0.1rem; */
  padding: 1rem;
}

That means that the bootstrap 15px left and right negative margins are not being applied and thus the element will be 30px too wide because it has not been dragged into the gutters.

Go back and read the documentation on the bootstrap gutters as its all explained there

[PaulOB]

@PaulOB

Then elements are always inside a .col?? element which itself must be a direct child of the row element. The row element has negative margins that match the padding on the container in order to set up the gutter system for the columns. Break or change one of these inadvertently and you break the whole layout.

I already mentioned this above

[pyxxel]

Thanks for clearing things up, PaulOB!
I must admit, a lot of this is over my head, and a “dummies” type guide would be ideal to help get a good overview before continuing with Bootstrap’s own manual as a source of reference. I finally came over “How to the Bootstrap 4 grid works” which helped me understand how rows/columns work and a lot of other things in a plain, practical language.

By “direct child of the row element” I understand this means all columns have to be directly underneath a row (i.e. one level below). With this in mind, along with reading GetBootstrap “nesting content” I believe I have something that now works and is set up correctly:

So, if the structure is OK I assume can I proceed with filling in the text/image contents into the columns (adding/removing columns as needed) along with whatever “module” I need (jumbotron, form, card, carousel), or is there something else I need to look into first?
…assuming I have a general idea of what kind of structure I want the page to have of course

There’s a missing value in that rule. It should be this:

.sidenavbar{
  position:-webkit-sticky;
  position:sticky;
  top:0;
}

Thanks.
“Webkit” refers to Safari, right?

[saleem51]

Thank you very much this will help me too !!!

[pyxxel]

Welcome to the forum, Saleem51!
The “How to the Bootstrap 4 grid works” site I mentioned above is well worth the read IMHO.
And experimenting within Codepen as PaulOB suggested earlier has proved invaluable to me. It allows you to play around with all this stuff without much hassle of setting up everything first.

[PaulOB]

@pyxxel

believe I have something that now works and is set up correctly:

Yes that looks better

@pyxxel

“Webkit” refers to Safari, right?

Yes basically Safari and ios (although there are others based in webkit) which didn’t support the native position:sticky until recently.

[saleem51]

Thank you very much!!!

[pyxxel]

@PaulOB

Yes basically Safari and ios (although there are others based in webkit) which didn’t support the native position:sticky until recently.

That’s a useful site for checking browser compatibility in your link above!
I want to make my site compatible with older browsers, so this is good to know.

I just noticed that the “sticky” feature of the sidebar column doesn’t work despite using position: sticky;
It should work, but I have a feeling it’s a structural problem that has to do with <div class="row"> and <div class="col">. I’m going to take a closer look at that although it appears to be OK (I had my doubts about the Jumbotron covering the entire horizontal top, but removing it didn’t solve my problem so that’s apparently not it). The other elements (carousel, cards, various column boxes etc.) are all within the main content column, so they should be OK.
Here’s my page layout “skeleton”:

UPDATE: I think I’m on to something… (it helps coloring the various elements).
It seems like the left content box (sidebar nav) surrounds the right content box (text/image content with all the small items inside). So they’re joined together.
I believe the left and right content boxes should be independant of each other. I’m going to see how I can get that done and still keep the same general appearance.

[PaulOB]

@pyxxel

I just noticed that the “sticky” feature of the sidebar column doesn’t work despite using position: sticky;

Position:sticky is sticky in the current context. You have two flex items of exactly the same height so there is nothing that can be sticky

If you change the default alignment of stretch to align-items:flex-start then the element will be sticky as long as the other element is scrolling.

.leftrow {
   align-items:flex-start;
}

[pyxxel]

I’m trying to understand why I can’t get the sidebar column to stick despite adding the above (align-items:flex-start;) with my basic layout (https://codepen.io/CodeDecoder/pen/VwWgXQO), here the same thing but with some text content added to allow for scrolling:

Is it because an “independant” column won’t stick but has to be nested? Is this what you mean by “current context”? Earlier you also wrote:

It will only stick at the top while its parent is in view (that’s how sticky works)

… which could also point to what I just suggested.

[PaulOB]

@pyxxel

despite adding the above ( align-items:flex-start; )

You need to add it to the row that holds the columns as that is a flexbox.

Of course once you add align-items:flex-start you will lose the full height red background (but you can get around that by adding the red background to the row instead). As you see from the screenshot element is now sticky.

[pyxxel]

@PaulOB

You need to add it to the row that holds the columns as that is a flexbox.

Aha!!!
I think I’m starting to understand