Bootstrap header rendering differently in Firefox

Hi, I am using Sage 9 and Bootstrap 4.0.0-beta.2, but I have a small problem with the header HTML code. It renders differently in Firefox, whilst being fine in Chrome, in an appropriate position on the page, the H1 tag comes right at the top of the page in Firefox very close to the top, not really acceptable viewing, and I can’t figure out why. Code for the header.blade is below:

<div class="cover-container">
  <div class="cover-inner container">
      <div class="row justify-center">
        <div class="col-lg-12 mt-12 mb-12 text-center">
          <h1 class="jumbotron-heading>The Heading</h1>
          <p class="lead">Some sample text to fill in</p>

It’s inside a section called cover-1 and CSS is below:

.cover-1 {
	background: $background-color url(../images/cover-bg-1.jpg) center;
	background-size: cover;
	min-height: 50rem;
	height: auto;
	border-radius: 0;
	width: 100%;
	color: #fff;
	padding-top: 1rem;
	h1 {
		font-weight: 200;
	p.lead {
		font-family: $headline-font;
		margin: 2rem auto;
		color: rgba(255, 255, 255, .75);
	.cover-container {
		display: table;
		height: 100%;
		min-height: 44rem;
		margin: 0 auto;
.cover-inner {
	display: table-cell;
	vertical-align: middle;

As usual, any tips welcome! PS Sage 9 is pretty cool especially with all the work already done on Webpack, maybe you could also look at new bundler. Thanks!

Chrome view


Firefox view


You’re missing a double-quote after the h1 class attribute.

1 Like