How to make Bootstrap 4 Cover Example work?

Question

I'm a beginner at this. How do I make Bootstrap 4 cover example work correctly so I can edit it myself?

I've tried downloading the source, take bootstrap.min.css and .js and place them in my main folder, then View Page Source to get the template's code and pasted it into my index.html. All I see is plain Bootstrap text when I preview it... What steps am I missing?

score 1 · Accepted Answer · answered Apr 02 '16 at 21:43

1

You have to fix the paths in the html file.

 <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

should be

 <link href="bootstrap.min.css" rel="stylesheet">

in case the css file and the index.html are in the same folder. The same holds for bootstrap.min.js at the bottom of the html. Furthermore you need the cover.css and save it in the same directory as the html.

answered Apr 02 '16 at 21:43

BenjaminH

324
3
13

Thank you! Turned out, I didn't create a CSS file for cover.css, which I didn't know was clickable on the page source. You definitely led me on the right track. – digitalsara Apr 03 '16 at 02:11
And, to add the image..? – Dustin Graham Aug 06 '16 at 20:10

score 1 · Answer 2 · answered Nov 09 '16 at 20:35

1

To add the image add the following code to your body tag in cover.scss

background: image-url('background.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

answered Nov 09 '16 at 20:35

poidog

23
3

I modified your answer to get it to work for me in the css. `background-image: url('image.jpg');` `background-repeat: no-repeat;` `background-position: center center;` – Mike Casas Jan 25 '18 at 20:59

score 0 · Answer 3 · answered Nov 01 '19 at 06:01

0

The actual source code, along with all other bootstrap example are here. https://github.com/twbs/bootstrap/tree/master/site/content/docs/4.3/examples/cover

The url may change as bootstrap get's updated

answered Nov 01 '19 at 06:01

briankip

2,502
2
23
26

How to make Bootstrap 4 Cover Example work?

3 Answers3