CODEWITHSUNDEEP
reactjsbootstrap-4
Jonathan Small
Jonathan Small

Reputation: 1079

ReactJS and bootstrap

I have a reactJS application and I would like to integrate bootstrap. I have the following index.html file:

<html>
<head>
    <title>Whats my junk worth</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Just+Another+Hand' rel='stylesheet' type='text/css'>
</head>
<body class="body_background">
    <div id="root"></div>
    <script src="bundle.js"></script>

     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


</body>

I tried laying out some simple pages with code such as this:

<div class="row">
    <div class="col-sm-4">
        Put out some test code
    </div>
    <div class="col-sm-4">
        Put out some test code
    </div>
    <div class="col-sm-4">
        Put out some test code
    </div>
</div>

The above sample generated 3 lines of output instead of spanning across a single row. I also tried changing class= to className= but that had no effect.

Is there anything else that I need to include in order to make use of bootstrap classes?

Upvotes: 0

Views: 428

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362290

The code and Bootstrap references should work the way you have it.

"I tried laying out some simple pages with code"

How? Did you put the html into a Component render(), or did you put it directly in the template? Either way it should work. Remember too that the sm breakpoint is 576px so the columns will stack vertically if the viewport with is less than 576px.

Working demo: https://codesandbox.io/s/5vm72q34qk

P.S. - react-bootstrap doesn't yet support Bootstrap 4.

Upvotes: 0

Alex Antonov
Alex Antonov

Reputation: 15146

Consider using react-bootstrap package. You wouldn't waste you time on such things. Just components, just functionality.

It'll look something like this:

<Row className="show-grid">
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
</Row>

UPD

Bootstrap has getting started guide which explains how should you handle your assets. Hope it'll help

Upvotes: 2

user5008872
user5008872

Reputation:

You can use react-bootstrap and convert your code into the following:

<Row className="show-grid">
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
</Row>

Upvotes: 1

Related Questions