full screen bg

Bootstrap Studio Help
1

How can i do a full screen back ground hero?

2

There are techincally 2 ways to go about this, which depends on whether or not you want it to be 100% width regardless of screen size which means >1200px.

If you want greater then 1200px, don't put your jumbotron (hero) in a .container.

<body>
    <div class="jumbotron hero-nature">
        <h1 class="hero-title">Hero Nature</h1>
        < p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.< /p>
        < p>< a href="#">Learn more< /a>< /p>
    </div>
</body>

If you want max width of 1200px then put it in a .container.

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron hero-nature">
                    <h1 class="hero-title">Hero Nature</h1>
                    < p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in.< /p>
                    < p>< a href="#">Learn more< /a>< /p>
                </div>
            </div>
        </div>
    </div>
</body>

Even the .container-fluid has 15px left/right gutters, but you could customizer your CSS to remove that.

Saj

3

Drag&Drop the hero-food component into your design.

In the Hero-Food.css add to "div.jumbotron.hero-food" height: 100%;

In order to make it work you need also to create a custom style and add for both html and body 100% height: html, body: { height: 100%; }

Now the hero component will go full screen (ie full viewport)

4

Do'h didn't even think of the height, my bad.

Along with the height, if you want to now vertically align the content to the middle of the viewport you can do that in 2 ways.

This for all cases in your custom css so you don't need to edit the hero css

html, body, .jumbotron{
  height:100%;
  margin:0;
}

First way is to support pretty much every browser

body{
  display:table;
  width:100%;
}

.jumbotron{
  display:table-cell;
  vertical-align:middle;
}

or Second way is to support modern browsers (IE10+/Edge, Chrome, Firefox etc..), comments not needed.

.jumbotron{
  display:-webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display:-moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
  display:-ms-flexbox;  /* TWEENER - IE 10 */
  display:-webkit-flex; /* NEW - Chrome */
  display:flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-direction:normal;
  -moz-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

Saj

5

I would like to use a Flexbox, but when I try to type this code → -webkit-box-direction: normal;

The following happens:

http://www.suzukimotor.rs/wp-content/uploads/2017/11/Flexbox.jpg

http://www.suzukimotor.rs/wp-content/uploads/2017/11/Flexbox2.jpg

Can someone explain to me what should do with this?

6

Sorry that you've run into issues! The -webkit- flex properties that you are using have been deprecated for some time, and bootstrap studio shows them as incorrect. They will still be added to your stylesheet. Flexbox if pretty well supported these days (if you don't support IE that is), so you can omit the vendor prefixes entirely.