CODEWITHSUNDEEP
reactjsbootstrap-4
suga sunshie
suga sunshie

Reputation: 99

Why is my CSS Bootstrap not working in Codesandbox?

I used some Bootstrap in the code editor at Codesandbox, but it's not working so my images look messy and oversized. How can I manage to use Bootstrap inside my Codesandbox? If anybody knows please help me! Thank you so much!

This is my Codesandbox: https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-30bgi?file=/src/index.js

Upvotes: 3

Views: 1505

Answers (3)

AnneV
AnneV

Reputation: 96

This is also resolved by adding bootstrap as a dependency in codesandbox and import "bootstrap/dist/css/bootstrap.min.css";to App.js or src/index.js (due to the cascading nature of CSS, make sure it is imported after any other stylesheets).

In the instance when react-bootstrap is used in codesandbox, it is necessary to have bootstrap and react-bootstrap as dependencies, with the stylesheet imported as above.

The react-bootstrap docs have a substantiating explanation for this here.

Upvotes: 0

Kumawat Lalit
Kumawat Lalit

Reputation: 578

After a long year, it is still not working.

but it works when you simply add your bootstrap through CDN links

just add any one of these in your root (index.html)

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

or----->

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Upvotes: 0

Gulshan Aggarwal
Gulshan Aggarwal

Reputation: 999

Just add the following Bootstrap CDN link into your public/index.html file's head tag

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
    crossorigin="anonymous">

Upvotes: 2

Related Questions