I am new to React, Bootstrap, Typescript, and web development in general, but I am working on building up my skills by building a basic webpage. Right now I am stuck on trying to get a Bootstrap container to fit the full width of the webpage.

I would like the container with the list and "feed" columns to take up the full width of the page instead of having some margins on the sides.

Here is my code for the App.tsx file:

import NavigationBar from "./components/NavigationBar"
import ListGroup from './components/ListGroup';

function App() {
    return (
        <div>
            <NavigationBar />
            <div className="container">
                <div className="row align-items-start">
                    <div className="col-md-auto">
                        <ListGroup />
                    </div>
                    <div className="col-lg-auto">
                        Feed
                    </div>
                </div>
            </div>
            
        </div>
    );
}

export default App;

Here is what the webpage looks like:

The navbar and listgroup code are copied straight from Bootstraps documentation.

I have tried setting the style component on the container div to 125% even 200%, but that did not change the appearance of the webpage.

I am new to React, Bootstrap, Typescript, and web development in general, but I am working on building up my skills by building a basic webpage. Right now I am stuck on trying to get a Bootstrap container to fit the full width of the webpage.

I would like the container with the list and "feed" columns to take up the full width of the page instead of having some margins on the sides.

Here is my code for the App.tsx file:

import NavigationBar from "./components/NavigationBar"
import ListGroup from './components/ListGroup';

function App() {
    return (
        <div>
            <NavigationBar />
            <div className="container">
                <div className="row align-items-start">
                    <div className="col-md-auto">
                        <ListGroup />
                    </div>
                    <div className="col-lg-auto">
                        Feed
                    </div>
                </div>
            </div>
            
        </div>
    );
}

export default App;

Here is what the webpage looks like:

The navbar and listgroup code are copied straight from Bootstraps documentation.

I have tried setting the style component on the container div to 125% even 200%, but that did not change the appearance of the webpage.

• html
• css
• reactjs
• typescript
• bootstrap-5

1 Answer 1

Use class container-fluid instead of container.

See the sizes for the container classes: https://getbootstrap/docs/5.0/layout/containers/#how-they-work

import NavigationBar from "./components/NavigationBar"
import ListGroup from './components/ListGroup';

function App() {
    return (
        <div>
            <NavigationBar />
            <div className="container-fluid">
                <div className="row align-items-start">
                    <div className="col-md-auto">
                        <ListGroup />
                    </div>
                    <div className="col-lg-auto">
                        Feed
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;