Bootstrap 4 - Help with responsive hero image on landing page

Report · Dec 30, 2018

Hello and (almost) happy new year!

Problem

I've been learning Bootstrap 4 for the past couple of days and need some help with getting a landscape hero image to fill vertically on a landing page while keeping the footer at the bottom of the viewport without scrolling. I think I'm almost there, I just don't know what I don't know!

Background

I've taken 'essential training' courses on lynda.com for both Dreamweaver and Bootstrap 4 and I'm having trouble putting it all together in different situations. I've researched and tried a number of things but I don't have the experience to know what to do when. I know some html and css but this is the first real site I've created from "scratch" start to finish, it's for my wife so It'll get done one way or the other! 🙂

Work

The idea is to create a landing page that has a centered responsive full viewport image with a standard BS 4 menu at the top and footer area that stays at the bottom of the viewport (not sticky) without scrolling, there's not enough content to scroll on any (or most) devices. The rest of the pages will have enough content to scroll so the footer won't be an issue when using the grid, and there will be no full viewport images on other pages.

I've created two versions of the landing page below. Neither is fully fleshed out as I'm working on this issue, and I plan to do media queries to scale the text and add some social icons to the top right of the menu with font-awesome (I think).

v1

This version is the most like what I'm after. The issue is one has to scroll a little to get to the footer. I'm also unable to center the "Knitting designs by Emily Ross" vertically. This uses a background image on the 'header' block element.

I'll try to embed or link to CodePen:

See the Pen BS4 Image v1 by Brian (@briankross) on CodePen.

v2

Since this one uses grid rows and columns I'm thinking vertically aligning "Knitting designs by Emily Ross" will be easier (flexbox, I'm trying to wrap my head around this). The issue here is when the viewport becomes slim, there's white space at the bottom. I thought adding this to css would fix it but sadly not. I'm missing something.

custom-v2.css (partial)

body {
min-height: 100vh;
}

I'll try to embed or link to CodePen:

See the Pen BS4 Image v2 by Brian (@briankross) on CodePen.

If you read this far, thank you! I'm looking forward to your comments. I'm new to all of this, feel free to tell me what I'm doing wrong and what I'm doing right.

- Brian

Report · Dec 30, 2018

Try adding the highlighted bits to the CSS (v1). You may need to adjust the values to suit.

header {
height: calc(100vh - 115px);
/*background-image: url(../images/030-Kellermann-04-2560.jpg);*/
background-image: url("https://knitterain.com/images/030-Kellermann-04-2560.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: relative; /* to allow positioning of absolute positioned items */
}
#header #headerBrand {
text-shadow: 1px 1px 3px rgba(25,25,25,0.75);
color: #FFFFFF;
position: absolute;
top: 30vh;
}
#header #headerBrand h1 {
padding-top: 0px;
margin-bottom: -1%;
font-size: 5rem;
font-weight: 400;
}
#header #headerBrand h2 {
font-size: 4rem;
font-weight: 200;
}
#header #headerText {
text-shadow: 1px 1px 3px rgba(25,25,25,0.75);
color: #FFFFFF;
font-weight: 200;
font-size: 2rem;
margin-top: 10%;
position: absolute;
bottom: 0;
}

Wappler, the only real Dreamweaver alternative.

Report · Dec 30, 2018

Amazing, thank you for that!

This was key for me in the css for the 'header' element:

height: calc(100vh - 114px);

Since I don't have any experience I'd like to know your thoughts:

Am I'm on the right track?
Should I use the grid instead?
Comments?

- Brian

Report · Dec 30, 2018

It depends entirely on what works best for you.

I use Bootstrap because it is the easiest and fastest way that I can create a site. If you are not bound to Bootstrap, you may want to have a look at something like https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/

Wappler, the only real Dreamweaver alternative.

Report · Dec 31, 2018

Being picky here - IF you want the footer to stay at the bottom on mobile, using the height calc method wont work, (unless you guess what height the mobile menu is and recalculate for mobile) otherwise it will just push the footer out of view when you open the mobile menu. It might not be on your radar to keep the footer at the bottom once the mobile menu is active, I'm just being overly critical.

Looking at your code there is no need to keep duplicating the 'container-fluid' div:

<h1>knitterain.com</h1>

<h2>knitting design done right</h2>

</div>

<p>Knitting designs by Emily Ross</p>

</div>

This would be sufficient:

<h1>knitterain.com</h1>

<h2>knitting design done right</h2>

<p id="headerText">Knitting designs by Emily Ross</p>

</div>

It cuts down on the amount of excess html and boy you need all the help you can get in that respect when using Bootstrap. One instance is not an issue BUT if you keep applying the same workflow it soon becomes overly obtuse and then difficult to troubleshoot.

Report · Dec 31, 2018

https://forums.adobe.com/people/Brian+K.+Ross wrote
v1
I'm also unable to center the "Knitting designs by Emily Ross" vertically.
See the Pen BS4 Image v1 by Brian (@briankross) on CodePen.

I did not see the vertical centering query first time around.....I overlooked it.

This IS a case where you may need to use extra <divs> in the html. So assume your construction is as it originally was:

<h1>knitterain.com</h1>

<h2>knitting design done right</h2>

</div>

<p>Knitting designs by Emily Ross</p>

</div>

Add to the 'header' css selector:

display: flex;

flex-direction: column;

Add to the '#headerText' css selector:

display: flex;

flex: 1;

align-items: center;

That will vertcially center - "Knitting designs by Emily Ross".

This can be done using Bootstraps inbuilt css utilities classes applied to the containers themselves BUT as you have already created some css selectors you may as well apply the css to those and keep the html from becoming overly complex.

Report · Dec 31, 2018

Hi osgood_,

It might not be on your radar to keep the footer at the bottom once the mobile menu is active, I'm just being overly critical.

I'm okay with page content being pushed down when tapping the hamburger menu icon. Tap it again and the content retracts.

'container-fluid'

About the use of container-fluid, thanks for the advice. As I've only been at this for the better part of a week, I'm glad that ultimately it looks like my attempt to put things together was a good way to go.

This can be done using Bootstraps inbuilt css utilities classes applied to the containers themselves BUT as you have already created some css selectors you may as well apply the css to those and keep the html from becoming overly complex.

I'm all about learning to use bootstrap utilities and I have a weak understanding of flexbox. I'll try to translate your css additions to bootstrap in html. This is a big missing link and a "you don't know what you don't know" area for me to gain experience on.

Footer wise I made it in to two columns on all display widths except under small, and I added a media query to calculate a new header element height to compensate for the extra height. On larger screens the footer is one line with the left text aligned left and right text aligned right. On small screens they collapse to one column with two rows, text centered.

html

<footer class="container-fluid footer bg-dark py-3">
  <div class="row">
    <div class="col-sm-6 text-center text-sm-left my-auto"><span class="text-muted">&#169; 2009-2019 knitterain.com, llc</span></div>
    <div class="col-sm-6 text-center text-sm-right my-auto"><span class="text-muted"><i class="fas fa-code"></i> with <i class="fas fa-heart"></i></span></div>
  </div>
</footer>

css

@media screen and (max-width:576px){
header {
height: calc(100vh - 138px);
}
}

I also added social media icons with font-awesome to the menu and did some ordering

<nav class="navbar navbar-expand-sm navbar-dark bg-dark"><a class="navbar-brand" href="#"><img src="images/k-logo.svg" alt="knitterain logo" height="30" width="auto"/></a>
  <div class="collapse navbar-collapse order-3 order-sm-2" id="navbarSupportedContent1">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Errata</a></li>
      <li class="nav-item"> <a class="nav-link" href="#">FAQ</a></li>
      <li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
  <div class="d-flex flex-row order-2 order-sm-3">
    <ul class="navbar-nav flex-row">
      <li class="nav-item"> <a class="nav-link px-3" href="#"><i class="fab fa-facebook"></i></a></li>
      <li class="nav-item"> <a class="nav-link px-3" href="#"><i class="fab fa-instagram"></i></a></li>
      <li class="nav-item"> <a class="nav-link px-3" href="#"><i class="fab fa-ravelry"></i></a></li>
    </ul>
    <span class="pl-3">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="align-middle pr-1">Menu</span><span class="navbar-toggler-icon"></span></button>
    </span> </div>
</nav>

Honestly I'm not confident I'm doing anything right, but so far things seem to look pretty good. Many thanks to BenPleysier and osgood_, I couldn't do it without you!

Happy New Year!

Adobe Community

Bootstrap 4 - Help with responsive hero image on landing page

1 Correct answer