Skip to main content

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. Paste the content inside your return statement. There will be some changes that need to occur before we're ready test.

  • First, change each class attribute to className
  • Second, inside the <form> there is an <input>. The input needs to be self-closed: <input ... />

That's it.

Test to make sure that everything works (npm start). The dropdown and mobile menus should work as well.

Comments

  1. JoyalJuly 29, 2020 at 9:43 AM

    Nice article I was impressed by seeing this blog, it was very interesting and it is s for sharing all the information with us all.very useful for me. Thank you for sharing any good knowledge and thanks for fantastic efforts.
    oracle training in chennai

    oracle training institute in chennai

    oracle training in bangalore

    oracle training in hyderabad

    oracle training

    oracle online training

    hadoop training in chennai

    hadoop training in bangalore

    ReplyDelete
  2. MS SilvaApril 27, 2023 at 10:46 PM

    Here are all the resposive templetes. I am using Bootstrapious.com to get bootstrap template

    ReplyDelete

Post a Comment

Popular posts from this blog

Creating your own ArrayList in Java

Wanted to show that certain data structures in Java can be created by you. In this example, we'll go ahead and create an ArrayList data structure that has some of the methods that the built in ArrayList class has. We'll create 2 constructors: The default constructor that creates an ArrayList with a default size of 10. Constructor that allows an initial size to be passed to the array. We'll also create a number of methods: void add(Object x);  A method that allows you to place an Object at the end of the ArrayList. void add(int index, Object x);  A method that allows you to place a value at a given location. Object get(int index):  Allows you to retrieve a value of the arrayList array from a given location. int size();  Allows you to get the number of elements currently in the Arraylist. boolean isEmpty();  Tests to see if the Arraylist is empty. boolean isIn(Object x);  A method that sees if a particular object exist in the arrayList. int ...
49 comments
Read more

Laravel 6.x with React and react-router

This will get you started on getting your first React/Laravel application deployed to your server. We'll cover everything from installation to deployment. Start by reading the installation instructions on  https://laravel.com/docs/6.x#installing-laravel . We'll cover those details below. Setting Up Laravel Check that you have the latest version of PHP installed on your computer.  It must be >= 7.2.0. Open terminal to get the Laravel installation tool. Type in composer global require laravel/installer Type in laravel to verify installation. Navigate to a directory on your computer where you want to install your project on your terminal. Run the following command: laravel new project_name (replace project_name with your project name). Once complete, cd into your new project. Type the following command: php artisan serve. You'll get a message like the following if it's running successfully: Laravel development server started: http://127.0.0.1:8000 ...
59 comments
Read more

Programming Language Concepts Test Questions/Answers

One of the easiest methods that I use to learn new topics is by creating notes on the subject and then by turning those notes into questions and answers. Remembering answers to questions just seems more natural. I was able to memorize 323 questions and answers in a matter of a couple of days. I wanted to start doing this for some topics that I find pretty interesting. To begin, here are some questions and answers to Programming Language Concepts (PLC). I'm reading your mind right now and the answer is yes, there will be more. 1. Name 3 reasons for studying PLC. - Better understanding of current programming languages - Advancement of computing - Increased capability to express ideas - Increased capability to learn new programming language. - Better understanding of which programming language to choose.  2. Name the 5 programming domains and languages best suited for each. - Scientific (Fortran, ALGOL 60) - Business (COBOL) - AI (Lisp, Scheme, Prolog) - Web (PHP, ...
12 comments
Read more