Remove side margins on Bootstrap4

I am using the bootstrap4 theme but there are margins on each side of the page. Is it possible to make bigger content like images fill the entire width of the page? I tried width=100% but it just filled the container.

@chatterannex, It requires a bit of knowledge about Bootstrap’s v4 and especially its grid system and containers.

Not sure if it will fit your needs, but you might try class="container-fluid" which uses a 100% width.

Thank you for your response. I have already tried that but it still has the margins. I am looking to make it stretch across the entire screen. It works fine in a regular webpage but with grav there is some sort of container that the main contents are put in which causes them to not fill the page.

@chatterannex, That hasn’t got much to do with Grav, but rather how the Bootstrap v4 itself works and how theme Bootstrap4 uses it.

Everything inside a container/container-fluid will have a padding-right and padding-left. Unless you remove/change the padding-left, padding-right inside _grid.scss
Content without some padding would be very awkward imho.

If you want for example a hero image from egde to edge, you need to place it outside any type of container, for which you’ll have to edit the Twig template(s).

According the Bootstrap v4 docs:

Need an edge-to-edge design? Drop the parent .container or .container-fluid .