# \[resolved\] Bootstrap and p5 invisble canvas in jumbotron

**URL:** <https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256>\
**Category:** Beginners\
**Created:** [May 15, 2019, 9:28am UTC](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256 "2019-05-15T09:28:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Valoute\_GS](https://avatars.discourse-cdn.com/v4/letter/v/94ad74/32.png) [@Valoute\_GS](https://discourse.processing.org/u/Valoute_GS)\
**Post date:** [May 15, 2019, 9:28am UTC](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256/1 "2019-05-15T09:28:23Z")

</div>

Hello, I’ve got a small problem, I was trying the bootstrap and p5 exemple [here](https://codepen.io/Jastor11/pen/XpgZae) and it works great, but not when I try it localy.  
I’ve make some modification (path to the sketch) and simplify but the code but nothing worked  
My code is simple but the canvas is still invisible

index.html :

```auto
<html>
    <head>
    	<meta charset="utf-8">
    	<title>p5 walkthrough</title> 
    	<script src="sketch.js"></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">    	
    </head>
    <body>       
        <div class="container">
            <div id="jumbo-canvas" class="jumbotron">
              <hr />
            </div>
        </div>
    </body>
</html>

```

sketch.js

```auto
function setup(){
  var canvas = createCanvas(800, 200)
  canvas.parent('jumbo-canvas')
  background(255, 0, 200)
}

function draw() {
  background(150,10,0)
}

```

Does someone can explain me why ?  
Thanks !

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 15, 2019, 9:39am UTC](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256/2 "2019-05-15T09:39:26Z")

</div>

> [@Converting from java to p5js, not working as intended](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/10):
>

---

<div class="post-metadata">

**Author:** ![Valoute\_GS](https://avatars.discourse-cdn.com/v4/letter/v/94ad74/32.png) [@Valoute\_GS](https://discourse.processing.org/u/Valoute_GS)\
**Post date:** [May 15, 2019, 9:47am UTC](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256/3 "2019-05-15T09:47:34Z")

</div>

Find the solution x) I suck so much, I did not put the p5.xxxx.js script inport