Mastering vertical alignment in Bootstrap 4: Aligning one element to the bottom and another to the top

I'm struggling to align the elements (#header-text-bottom and anchor) to the bottom using bootstrap 4. I tried applying the vertical-align class to both elements but it doesn't seem to work.

Check out my code on jsfiddle

<header>
        <nav>
            <!-- TODO - build menu -->
        </nav>

        <div id="header-top-text">
            <div class="container">
                <h3>The East side 47<br>Multifamily Portfolio</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure nobis nulla illum aut ut quae minima dicta, impedit dolorem, delectus quis fuga nemo reprehenderit quod est. Perspiciatis, id, tempora?</p>
            </div>
        </div>

        <div id="header-bottom-text" class="align-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container align-bottom">
            <a href="#case-study" id="arow-white" class="btn secondaty-outline btn-sm" role="button">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </a>
        </div>
    </header>
htmlcssbootstrap-4

Answer №1

According to the documentation on Bootstrap, it is recommended to use a table (or an element with display: table) for alignment purposes.

Learn more about vertical alignment utilities in Bootstrap

/*============ Header ============*/


/* Header bg picture */

table {
  background-image: url('http://arielpa.x3.rs/es47/img/home-background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}


/* Menu */


/* Header Text */

#header-top-text {
  padding-top: 1.875rem;
  color: #fff;
}

#header-bottom-text {
  color: #fff;
}

#arow-white {
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<table>
  <tr>
    <td id="header-top-text" class="align-top">
      <div class="container">
        <h3>The East side 47<br>Multifamily Portfolio</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure nobis nulla illum aut ut quae minima dicta, impedit dolorem, delectus quis fuga nemo reprehenderit quod est. Perspiciatis, id, tempora?</p>
      </div>
    </td>
    <tr>
      <td class="align-bottom" id="header-bottom-text">
        <div class="container">
          <div class="row ">
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
          </div>
          <a href="#case-study" id="arow-white" class="btn secondaty-outline btn-sm" role="button">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </a>
        </div>
      </td>
    </tr>
</table>

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

Choosing a dynamic dropdown option using jQuery and AJAX

I am facing an issue with a select box that is dynamically populated and should display information about a single option. The problem I am encountering is that the browser does not trigger a ':selected' event when I click on any of the options. ...

javascriptjqueryhtmlajax

Preventing Javascript Pop Up from automatically jumping to the top of the page

Upon clicking a button (refer to image below and take note of the scroll bar position), a div pop up is triggered through Javascript. View image: https://docs.google.com/file/d/0B1O3Ee_1Z5cRTko0anExazBBQkU/preview However, when the button is clicked, the ...

javascriptjqueryhtmlcss

What is causing this element to unexpectedly elongate when I hover on it, despite having a 3D rotation effect applied?

After implementing a rotational hover effect on an element using the following code: transform: perspective(600px) rotateY(-25deg); I encountered a major issue when hovering over it. The element sometimes rotates abruptly and stretches excessively. If y ...

htmlcssrotationhover

Retrieving text that has been HTML-escaped from a textarea using jQuery

Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "&lt;hello&gt;, world!"; based on the user's input? The current code s ...

javascriptjqueryhtmlfunction

My jquery seems to be malfunctioning -- can't quite figure out what the issue is

My jquery is not working as expected! It was functioning fine when I included the script directly in the HTML file, but now that I have moved it to a separate file, it's not working. I even tried changing the file name, but no luck. //HTML file loca ...

jqueryhtml

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

javascriptjquerycss

When switching between tabs on Twitter Bootstrap, the page automatically scrolls to the top

I am encountering an issue with my tabs setup. Each tab has a different height and there is a Row on top of the tabs. You can see the problem in action on this JSFiddle. Whenever I switch from a tab with greater height to a tab with less height, the page ...

jqueryhtmlcsstwitter-bootstrap

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

javascripthtmlcss

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

jqueryhtmlcss

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

What is the correct way to align my checkboxes with their corresponding labels?

I have been working with HTML to make some adjustments to a website. I recently got feedback to change the label of my checkbox, however, it is now overlapping with another checkbox. How can I resolve this issue? ...

htmlcss

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

Issue encountered when trying to attach a hover event to the items in a comb

Currently, I am facing a specific situation. The requirement is to display a custom tooltip when the mouse hovers over the combobox items (specifically the "option" tag). Initially, my solution involved using the title tag. While this method worked effecti ...

javascriptjqueryhtmlinternet-explorer

Inaccurate rendering of border widths on IOS platform

After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used). Interestingly, on any other type of device, the border looks perfectly fine. & ...

htmlioscss

How can AngularJS effectively parse JSON data containing HTML elements?

We are experiencing difficulties in reading a json file containing html content. Here is the code snippet with the json data we are working with: Json data: { "aboutContent": { "listItems": [{ "title": "Investors", "de ...

javascripthtmljsonangularjs

Aligning content within a table cell using the Div tag

I am struggling with a <td> that looks like this: <td valign="middle" class="table_td td top" style="width: 347px"> <div id="Style" style="position:absolute;"> <img src="images/additional-keywords-image.gif" style="background: ...

c#asp.nethtmlcss

I am unable to make any changes to the CSS in the WordPress code that is already integrated

I have created a static web page to serve as my primary homepage. The page is built using HTML and CSS, with some PHP code pulled from My WordPress integrated into it. One of the functionalities I've added is to display the three most recent posts on ...

htmlcsswordpress

Initiating the accordion feature requires two clicks and triggers an rotation of the icon

I managed to integrate some code I discovered for a FAQ accordion on my website. I am struggling with getting the title to expand with just 1 click instead of 2. Additionally, I would like the icon to rotate when expanding/collapsing, not just on hover. Be ...

javascripthtmlcssaccordionrotatetransform

Title with lower border shorter than width

Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...

htmlcsscss-shapes

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Hi there, I am a newcomer to the world of React JS web development. I am looking for guidance on how to implement a feature where users can select multiple cities from a drop-down or list, similar to the examples shown in image1. Once the user has made th ...

htmlcssreactjsbootstrap-4bootstrap-multiselect