After searching the internet for 5 hours, all I found was that each child of the column would line up horizontally.
I included the nav bar as it sometimes interferes with the layout.
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="/">Name</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<div class="navbar-nav">
<form class="form-inline" action="/search">
<input class="form-control bg-dark text-light mr-sm-2 py-1" placeholder="Search" aria-label="Search" name="q" required type="search">
</form>
<a class="nav-item nav-link" href="#">One</a>
<a class="nav-item nav-link" href="#">Two</a>
<a class="nav-item nav-link" href="#">Three</a>
<!-- Right alignment needed -->
<a class="nav-item nav-link" href="/sign-in/"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Sign in</a>
</div>
</div>
</div>
</nav>
<!-- HERE - Hero image -->
<div id="intro">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2 class="display-4 mb-2">My website</h2>
<hr>
<h4 class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
<a href="#">
<button class="btn btn-outline-light px-4 py-2">Action <i class="fa fa-rocket" aria-hidden="true"></i></button>
</a>
<div>
</div>
</div>
</div>
</header>
CSS
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url("via.placeholder.com/2000x1000") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
}
I have tried various solutions and cleanup my code, but still facing issues. I attempted different methods like flexbox and justify content...
Now I suspect it might be related to Bootstrap, but I'm not sure.
Edit: Forgot to mention, horizontal alignment can be achieved with:
margin: auto;
text-align: center;
align-items: center;
on the column.