0

I want to vertical align an element(arrow) at the bottom of the jumbotron which covers the whole page. I want to be able to do this without using jquery; I want to use only HTML, CSS and if required JavaScript.

The element <a href="#section2" class="container"><i class="fa fa-arrow-circle-down" id = "arrow" style="font-size:40px"></i></a> needs to be bottom aligned according to the jumbotron

Required Minimal Snippet is given below

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://images.unsplash.com/photo-1546448396-6aef80193ceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80');
  background-repeat: no-repeat;
  margin-bottom: 0px;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}

#arrow {
  margin-left: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>


  <i class="fa fa-arrow-circle-down" id="arrow" style="font-size:40px"></i>
</div>

1 Answers1

0

Need to create a div around the content you want to be fixed to the top and then another div that you want to the bottom and then flex the jumbotron.

.jumbotron{
display:flex;
  flex-direction:column;
  justify-content:space-between;
}

https://codepen.io/mike-portman/pen/xxVoXdq

MPortman
  • 144
  • 8