Reactjs Bootstrap Navbar not filling container

Question

I am creating a simple a Navbar in Reactjs with bootstrap 4. I currently have a component (Header.js) like so:

import React from "react";

export class Header extends  React.Component {
    render (){
        return(
            
                Navbar
            
        );
    }
}

which is rendered in the later index.js like so:

import React from "react";
import { render } from "react-dom";
import { Header } from "./components/Header";

import 'bootstrap/dist/css/bootstrap.css';

class App extends React.Component {
    render() {
        return (
            
                
                    
                
            
        )
    }
}
render(, window.document.getElementById("root"));

Here is the template the compenent is added to




    
    
    
    ReactJS Basics

The end result is a Navbar is rendered but it only has a background under the words (Navbar) instead of what I was expecting with the entire container coloured.

Carol Skelly · Accepted Answer

The problem is that the Navbar is inside the .row. Just remove the .row...

https://www.codeply.com/go/JyTwJ50OHY


    
         Navbar

The Bootstrap 4 .row is display:flex, and it's meant only to contain grid columns (col-*), but not the navbar, or other components. As explained in the docs, you can put the...

navbar inside container - to contain the navbar to the width of the container which is centered on the page.

--OR--

container inside navbar - full-width navbar background color, but contains the navbar components to the center.

Bootstrap 4 Navbar & Containers

Reactjs Bootstrap Navbar not filling container

Answers (2)

Related Questions