0

This is my first time using bootstrap with react and it is not applying the dimensions to my Navbar and Navbar Icon I installed dependencies and used className instead of class and still no affect.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import 'bootstrap/dist/css/bootstrap.min.css';


export default class Navbar extends Component {
    render() {
      return (
        <nav className="navbar navbar-expand-sm  bg-primary navbar-dark px-sm-5">
          {/* 
  https://www.iconfinder.com/icons/1243689/call_phone_icon
  Creative Commons (Attribution 3.0 Unported);
  https://www.iconfinder.com/Makoto_msk */}
          <Link to="/">
            <img 
            src={logo} 
            alt="store" 
            className="navbar-brand"/>
          </Link>

          <ul className=" navbar-nav align-items-center">
            <li className="nav-item ml-5">
            <Link to="/" className="nav-link">
            Products
            </Link>
            </li> 
          </ul>
        </nav>
      );
    }
  }

NavBar to be created and not huge logo and huge bar.

1 Answers1

0

Are you sure, you have the bootstrap.css added in the document? Here is a working example of your same code https://codesandbox.io/s/0c9iz

RameshVel
  • 64,778
  • 30
  • 169
  • 213
  • Hey i am pretty sure i installed it i ran npm install bootstrap.min.css and bootstrap do i need to import bootstrap into my NavBar file? –  May 25 '19 at 13:07
  • Yep that's the issue, you have to include that in the HTML in some way... Either directly including ` – RameshVel May 26 '19 at 04:15
  • but i have it imported in the index.js file –  May 26 '19 at 04:20