CODEWITHSUNDEEP
twitter-bootstrapreactjsapibootstrap-4
ANUBIS
ANUBIS

Reputation: 736

Reactjs - using Bootstrap classes is nearly impossible to do

How would I use a Bootstrap class like class='col-6' to make a grid system when I have to render my whole react application in a <div id="root"></div> ? it applies relatively to the <div id='root'> not the actual body element.

in index.html

<!DOCTYPE html>
<html lang="en">
  <body>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>React App</title>
  </head>
    <div id="root"></div>
    <noscript>
        You need to enable JavaScript to run this app.
      </noscript>  
  </body>
</html>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

in App.js (react)

class FormApp extends Component {
    render(){
      return(
        <div className="formdiv col-6">
        <form className="ui form" id='form' method='post' action='/post'>
        <div className="field">
          <h4 className="ui horizontal divider header">
            Budget Calculator
          </h4>
          <div>
            <input  className="input-group-text" type="text" id="id" name='_id' placeholder='NOTE NAME' autoFocus required autoComplete="off"/>
          </div>
          <div className="two fields">
            <div className="field">
              <input  type='text' name='firstItem' placeholder='item' required autoComplete="off"/>
              <input  type='text' name='secondItem' placeholder='item' required autoComplete="off"/>
              <input  type='text' name='thirdItem'  placeholder='item' required autoComplete="off"/>
            </div>
            <div className="field">
              <input  type='number' name='firstPrice'   onKeyUp={calc} className='price'  placeholder='price'  required autoComplete="off"/>
              <input  type='number' name='secondPrice'  onKeyUp={calc} className='price'  placeholder='price'  required autoComplete="off"/>
              <input  type='number' name='thirdPrice'   onKeyUp={calc} className='price'  placeholder='price'  required autoComplete="off"/>
            </div>
          </div>
          <input  type='number' name='tBudget' id='totalbudget' placeholder="total price" readOnly/>
        </div>
        <button id='save-btn' type='submit' onClick={saveNote} className="ui teal labeled icon positive button">
            <span>save</span>
            <i className="add icon"></i>
        </button>
        </form>
        <button id='reset-form' className='ui red button' onClick={reset}>reset</button> <br/>

        <div className="ui icon input">
          <input type="text" id='searchbyid' placeholder="Search..."/>
          <i  id='ShowByID' onClick={searchById} className="circular search link icon"></i>
        </div>

        <div className="ui icon input">
          <input type="text" id="deleteById" placeholder="Delete..."/>
          <i  id='delete' onClick={DeleteOneNote} className="circular trash link icon"></i>
        </div>
        <button id='showAll' className='ui blue button'>my notes</button>
        </div>
      )
    }
  }


 class App extends Component {
     render() {
        return (
         <Fragment>    
           <FormApp/>
        </Fragment>
    );
  }
}

in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


let render = ()=>{
    ReactDOM.render(<App />, document.getElementById('root'));
};

render(); // render the application

registerServiceWorker();

export {render};

Upvotes: 0

Views: 56

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14954

Do NOT ever throw in a "naked" Bootstrap column as you did there.

Here's what you need to make it work:

  1. First create a Bootstrap container (div with a class .container or .container-fluid).
  2. Then put a Bootstrap row inside (div with the .row class)
  3. And then put your Bootstrap column(s) inside that row.

This is how you can make it work. Not impossible.

Bootstrap columns always need a .row as a parent and Bootstrap rows always need a .container or .container-fluid as a parent.

Reference:

https://getbootstrap.com/docs/4.0/layout/grid/

Also worth reading:

How the Bootstrap grid works behind the scenes:

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Note: Even though that article is talking about Bootstrap 3, the described principles apply to the Bootstrap 4 grid as well.

Upvotes: 1

Avdept
Avdept

Reputation: 2289

You have few options.

  1. Wrap your return() with some outter divs like

    return(<div className="container"><div className="row>...)

  2. Add parent divs around your root element like <div className="container"><div className="row"><div id="root">...

  3. Add inner divs to your root element, and then attach your react to whatever you need. ReactDOM.render(<App />, document.getElementById('myInnerElement'));

Upvotes: 0

Related Questions