Skip to main content

Posts

Showing posts from 2019

Make Bootstrap's Navbar Sticky in React with JavaScript

If you need instructions on how to setup Bootstrap's navbar, follow my previous post. We'll start by creating the Navigation component. import   React   from   'react' ; import   './Navigation.css' ; let   navbar ; let   sticky ; class   Navigation   extends   React . Component  {      render () {         return (              < nav                    id = "main-navigation"                    className = "navbar navbar-expand-lg navbar-light"              > ... We needed to import the Navigation.css file. This is where we'll create our sticky CSS class. /* T...
1 comment
Read more

Using pure Bootstrap in React

To start, I understand that React Bootstrap exists. I wanted to find the simplest way to use bootstrap in a React Application without React Bootstrap. Let's start by creating the react app with create-react-app so that we're all on the same page. In public/index.html, we need to add some code. Right before the closing </head> tag, add the following CSS: Right before the closing </body> tag, add the following scripts: Save and close index.html. Open App.js and delete everything inside the return(). We're going to be just adding a navigation there for testing. If you're working on your own application, do not delete everything inside your return(). Navigate to the Bootstrap example page:  https://getbootstrap.com/docs/4.0/examples/starter-template/ Right click on it and View Page Source. The <nav> tag starts right after the <body> tag. Copy everything inside <nav>...</nav>, including the <nav> tags themselves. Pas...
2 comments
Read more