Align the element to the bottom within a Jumbotron using Bootstrap

Is there a way to align a vertical element (arrow) at the bottom of a jumbotron that covers the entire page using only HTML, CSS, and possibly JavaScript, without relying on jQuery?

The element 

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

Check out the Minimal Snippet 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>

htmlcssbootstrap-4vertical-alignment

Answer №1

To ensure content remains fixed at the top and bottom of a webpage, create separate divs for each section and use flexbox with the jumbotron class.

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

Visit this link for a live example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Is there a way to incorporate a feature similar to the "Get help" button on this website: The button, located in the lower right corner, opens a sticky chat menu. I am interested in adding dynamic information to the button (such as the number of tasks a u ...

cssangular

Styling using CSS works seamlessly with jsfiddle, but seems to encounter compatibility issues when applied directly in an HTML file. Interestingly, the CSS properties

I'm having trouble with table formatting in Chrome and Firefox. The TR style is not being applied when I load the file into the browser, even though the table and TD styles are working correctly. Interestingly, if I use the code in a fiddle it works ...

htmlcss

How can I expand all primary accordions while keeping secondary accordions collapsed?

I have a main accordion with nested accordions within each item. My goal is to only expand the main level accordions when clicking the button, without opening the nested ones. I want to open all "Groups" accordions while keeping the sub-accordions labeled ...

javascriptjquerybootstrap-4accordion

php concealing the rest of the website behind a login form

I have been working on enhancing my free math help website by adding a login form. However, I've encountered an issue where including the form on my index page causes it to hide the rest of the site. The source code I'm using is credited to Codex ...

phphtml

Enhancing a CSS-styled element using HTML

I created a style for an element using CSS: #box { background-color: white; } Then I placed the element within a div and it took on a different color. How can I change the color of the #box within the div? ...

htmlcss

Transitioning hover text causes rows to shift downwards (Bootstrap)

I can't figure out why my col-sm-4 elements are moving downward when transitioning. It seems like there might be a conflict in one of the class properties, resulting in excessive height for each box. UPDATE: The page has been revised and the issue w ...

htmlcsstwitter-bootstrap

the calendar icon is askew on the screen

Creating a calendar field for my validity field is on my to-do list. https://i.sstatic.net/0JLHt.png Here's the code I have so far: <div class="col-12 col-12 col-md-4 col-lg-2"> <div class="form-group"> &l ...

htmlcssbootstrap-4

AngularJS Gallery Showcase

Trying to showcase a collection of videos in a modal using angular.js, I decided to implement the solution from . However, I encountered difficulty in integrating my scope variables into the "html5gallery" class. <div class="html5gallery" data-skin="ho ...

jqueryangularjshtml

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

htmlangularangular-materialdatepickerangular15

Semi-transparent HTML5 Canvas illustrations

Can I generate partially transparent elements dynamically in canvas? I am currently adjusting the opacity of the entire canvas element through CSS, but I need certain elements to be more translucent than others. My research has not turned up any evidence ...

javascripthtmlcanvastransparencyopacity

Understanding the outcomes of CSS media queries

I'm currently grappling with CSS media queries for a mobile-centric webpage. My main objective is to maintain consistent font sizes on the page, regardless of device physical size and resolution specifications that may vary. However, I am finding that ...

cssmobilemedia-queriespixel

Tips for comparing URLs of the current active tab

Looking to create an adblocker specifically for a certain website. I have successfully implemented code that removes ads on the homepage, but it is still affecting other pages such as movie pages. This results in the deletion of the information section, i ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

The evolution of HTML5 has brought significant advancements in the realm of CSS positioning,

When incorporating relative positioning in CSS, I have observed significant variations in behavior based on the presence of the HTML5 doctype header <!DOCTYPE HTML>. A simple example to illustrate this point is as follows: <html> <body> ...

csshtml

Enhancing your header with Kendo UI Tabstrip elements

I recently implemented a tabstrip using Kendo UI, where I added an element in the header with an event handler attached to it. Below is the code snippet: <div> <div id="details"> <div id="tabstrip"> <ul> ...

javascripthtmlkendo-uikendo-tabstrip

swap the positions of two distinct texts

I need to dynamically change the positions of two texts based on the text direction (LTR or RTL) using CSS specifically for an email template. Here is the code snippet I am working with: '<span style="font-weight:bold; text-align: center;">US ...

css

Equal dimensions for all cards in the TailwindCSS gallery display

I am currently working on an image gallery in React with Tailwind CSS. Here's a glimpse of how it looks: https://i.stack.imgur.com/ABdFo.png Each image component is structured like this: <div className="flex items-center"> < ...

htmlcssreactjstailwind-cssimage-gallery

Illuminating a specific section of a 3D design with the power of Three.js

I have successfully displayed a 3D model in an HTML page and can rotate it 360 degrees. Now, I am looking to highlight specific parts of the model, such as the tail of an aircraft when clicking a designated button. Here is an example image for reference: ...

javascripthtmlthree.js3d-model

Aligning images vertically within floated elements

I'm struggling to vertically align some images to the bottom within floated elements, and I just can't seem to make it work. Check out this JSFiddle example. You'll notice that the images are currently aligned to the top. http://jsfiddle.n ...

htmlcss

Design a sleek and modern form using Bootstrap 4 that mirrors the aesthetics of the forms found in Bootstrap 3

Is there a way to create a form using BootStrap 4 that resembles the easily customizable forms from BootStrap 3? I am looking to have a bold, right-aligned label within a specific column size (e.g. col-sm-4), with an input field next to it whose width is c ...

csstwitter-bootstrapbootstrap-4

How to Implement Recursive Function Calls in JavaScript?

My goal is to create an interactive function using HTML and jQuery. I am utilizing jQuery to update and change attributes and text for a more seamless experience without page reloads, especially since it's not image-heavy. I have structured "scenes" ...

javascriptjqueryhtmlarraysrecursion