bs5 feedback

[FingerlessGlov3s]

The problem

The new bs5 template has fixed width containers for the content of the webpage, where as the old bootstrap theme used to utilise the whole width of the browser. Also when the width is limited it makes the navbar items look strange as they are not in align with the page content.

Utilising the full width of the browser makes more sense when sharing code, less scrolling required, for long lines of code. I personally don't see a benefit in limiting the width of the page.

The solution

Change section elements of the page from using container to container-fluid class.

Alternatives

Use old theme, or create your own custom theme based on bs5 to change the class name

[ppfeufer]

Same for the footer element …

[elrido]

This seems to be a choice of the bootstrap framework. Looking at the CSS rules they provide for the .container class, we see in bootstrap 3:

@media (min-width: 992px)
.container {
  width: 970px;
}
@media (min-width: 768px)
.container {
  width: 750px;
}

While in bootstrap 5 it is:

@media (min-width: 992px)
.container, .container-lg, .container-md, .container-sm {
  max-width: 960px;
}
@media (min-width: 768px)
.container, .container-md, .container-sm {
  max-width: 720px;
}
@media (min-width: 576px)
.container, .container-sm {
  max-width: 540px;
}

Changing this to the .container-fluid classes would change it to 100%.

Edit: I found an old PR that addressed this default behavior for the bootstrap 3 template in #501 and here is how the custom CSS looked like:

/* address 2K or 4K monitors when using bootstrap 3 */
@media (min-width: 1280px) {
	.container {
		width: 100%;
		padding-left: 4ch;
		padding-right: 4ch;
	}
}

We should forward-port this to the new template, since the goal is to replicate the older one, but using the new release of bootstrap.

[FingerlessGlov3s]

Surely the proper fix here is to use fluid containers as it does exactly what we're after, and then add pl-2 and pr-2 classes to add the side padding if that's needed.

Editing it is what we did last time but isn't really the right approach, in my eyes.

[ppfeufer]

Surely the proper fix here is to use fluid containers as it does exactly what we're after, and then add pl-2 and pr-2 classes to add the side padding if that's needed.

Editing it is what we did last time but isn't really the right approach, in my eyes.

Seconded.
BS5 already provides this class, so there is no need to "fight" against Bootstrap here.

Side padding is ps-* for left and pe-* for right (start and end), btw. But it shouldn't be needed, since container-fluid has a gutter of 1.5rem defined.

[FingerlessGlov3s]

Surely the proper fix here is to use fluid containers as it does exactly what we're after, and then add pl-2 and pr-2 classes to add the side padding if that's needed.

Editing it is what we did last time but isn't really the right approach, in my eyes.

Seconded.
BS5 already provides this class, so there is no need to "fight" against Bootstrap here.

Side padding is ps-* for left and pe-* for right (start and end), btw. But it shouldn't be needed, since container-fluid has a gutter of 1.5rem defined.

Yes it would be, start and end, it was left and right back in BS4 😅

When I changed it to fluid I had no left or right Margin and the border on the viewing of a paste had no margin. How does yours look?

Creating a paste looked ok.

[ppfeufer]

Form:

Preview:

that's because of the article row class.

If that's removed, it looks ok

Same in the Paste view, the row needs to be removed from the article element and it looks good …

[rugk]

Anyone feel free to submit a PR (with screenshots) to fix it…

[FingerlessGlov3s]

Please see PR #1341