0

I'm quite new to ReactJS and I just started to make a portfolio web page. I started to make the navigation bar which would contain all the menus. Also, I made use of react-bootstrap.

I've already run the following commands on the terminal:

npm install --save react-bootstrap bootstrap
npm install --save bootstrap
npm install --save react-router-dom

Question 1:

How to get the desired navigation bar? It's not getting aligned to the right although I mentioned it to be 'ml-auto'. I doubt that it is because of the bootstrap issue. 

import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      title: 'Neha Chaudhary',
      headerLinks: [
        {title : 'Home', path : '/'},
        {title : 'Team', path : '/team'},
        {title : 'News', path : '/news'},
        {title : 'About', path : '/about'},
        {title : 'Reach Us', path : '/reachUs'},
        {title : 'Portfolio', path : '/portfolio'}
      ],
      home : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      team : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      news : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      about : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      reachUs : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      },
      portfolio : {
        title : "Becoming",
        subTitles : "Projects that make a difference",
        text : "Check out my projects below"
      }
    }
  }

  render() {
    return (
      <Router>
        <Container className="p-0" fluid={true}>

        <Navbar expand="lg" variant="light" bg="light">
            <Navbar.Brand>Neha</Navbar.Brand>

            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/portfolio">Portfolio</Link>
                <Link className="nav-link" to="/team">Team</Link>
                <Link className="nav-link" to="/news">News</Link>
                <Link className="nav-link" to="/about">About</Link>
                <Link className="nav-link" to="/reachUs">ReachUs</Link>

              </Nav>
            </Navbar.Collapse>
          </Navbar>

        </Container>
      </Router>
    );
  }
}

export default App;

Question 2:

Is the className="p-0" pre-defined? I was going through a video tutorial and it said it makes padding=0. So, if it pre-defined how can I get to know about all these classes?

Output

enter image description here

James Z
  • 12,209
  • 10
  • 24
  • 44
Neha Chaudhary
  • 1,071
  • 4
  • 15
  • 31

2 Answers2

0

Did you include React-Bootstrap's CSS files?

Check out the getting started documentation. There is a CSS file you need to include in order to get React-Bootstrap's styles.

Nick Kinlen
  • 1,356
  • 4
  • 30
  • 58
  • Just added import <<'bootstrap/dist/css/bootstrap.min.css';>> and it works now. Thank you! Could you please answer to my question 2? – Neha Chaudhary Mar 20 '20 at 19:28
  • Check out the layout docs https://react-bootstrap.github.io/layout/grid/ and also take a look at the regular Bootstrap docs https://getbootstrap.com/docs/4.4/utilities/spacing/. It'll explain margins/padding and the grid system Bootstrap uses. – Nick Kinlen Mar 20 '20 at 19:34
  • Thank you for the prompt answer. – Neha Chaudhary Mar 20 '20 at 19:46
0

Apparently you haven't check the react-bootstrap docs. I will suggest you should read the docs first as it's better than any video tutorial out there.

In regards to your issue, If I am not mistaken, you will also need to add react bootstrap css in addition to the react-bootstrap components .

Suraj Auwal
  • 322
  • 3
  • 9