React,Bootstrap How to overwrite parent container class with container fluid


What I’m trying is when the User page loads it should override the parent container class with container-fluid and should expand to the entire screen. Here is my app.js file.

    function App() {
  return (
    <Router>
    <section className="app wrapper container">
      <nav>
        <Link to="/">Login</Link>
        <Link to="/register">Register</Link>
      </nav>
      <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/forget" element={<Forget />} />
      <Route path="/register" element={<Register />} />
      <Route path="/user" element={<Dashboard />} />  //----------> User page
    </Routes>
  </section>
  </Router>
  );
}

Here is my User Dashboard page

 return (
    <div >
<nav className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
  //... Navbar
</nav>

<div className="container-fluid">
  <div className="row">
    <nav className="col-md-2 d-none d-md-block bg-light sidebar">
      <div className="sidebar-sticky">
        <ul className="nav flex-column">
         //....Navbar...
        </ul>
      </div>
    </nav>

    <main role="main" className="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">

      //main User Dashboard
      </div>
    </main>
  </div>
</div>
    </div>

This is the result I’m getting

User Dashboard Page

Source: React – Stack Overflow

November 20, 2021
Category : News
Tags: containers | DOM | react-bootstrap | reactjs | router

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.