'Bootstrap 5 unused space

Good day

I have a question; I am using Bootstrap 5 for my website, which works fine yet, I want Bootstrap using the whole page and not like 80%; (See image)

Main Page

        <head>
            <title>Home</title>

            <link rel=stylesheet href='./style/stylesheet.css'>
            <link rel=stylesheet href='./style/bootstrap.css'>

        </head>

        <body>

            <div class='container'>

                <div class='row'>

                    <div class='col-12 navbar'>
                        <h1 class='title'>Welcome Reno</h1>
                    </div>

                </div>

            </div>
            
        </body>

And my css;

body {
background-image: url(https://i.imgur.com/M8Jq9IE.jpg);
background-size: cover;}

.title {
color: whitesmoke;}

.navbar {
background-size: cover;
background-color: gray;}

So how can I make it so Bootstrap uses the whole page and not have those wierd border/margins?

Thanks

htmlcssbootstrap-5


Solution 1:[1]

Bootstrap's default .container class has a fixed width that changes depending on the breakpoint.

If you want the container to be full width at all breakpoints, you need to use .container-fluid.

If you want to have the full width of the container depending on the breakpoint, you need to use one of the Responsive Container classes like container-sm or container-lg.

In your case, it would be:

    <head>
        <title>Home</title>

        <link rel=stylesheet href='./style/stylesheet.css'>
        <link rel=stylesheet href='./style/bootstrap.css'>

    </head>

    <body>

        <div class='container-fluid'>

            <div class='row'>

                <div class='col-12 navbar'>
                    <h1 class='title'>Welcome Reno</h1>
                </div>

            </div>

        </div>
        
    </body>

Check out the documentation for more information:

https://getbootstrap.com/docs/5.0/layout/containers/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 KreutzerCode

Related Questions