Achieving Vertical Alignment in Bootstrap 4: A Step-by-Step Guide

Bootstrap 4 has incorporated flex-box for vertical alignment now. Check out the details Here

Even though I have Bootstrap Version 4.0.0-alpha.6 linked on my website, I am still unable to achieve the same layout as shown in the example above.

This is the code I have written:

<div class="container-fluid header">
    <div class="row align-items-center">
        <div class="col-md-2 logo">
            <h2>Logo</h2>
        </div>
        <div class="col-md-6">
            <nav class="nav">
                <span>Nav</span>
            </nav>
        </div>
    </div>
</div>

Does anyone know what mistake I might be making?

These are the links I have added:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
htmlcssbootstrap-4

Answer №1

It is functioning properly, however, it is important to note that the col elements must be smaller than the parent row element for optimal performance.

The alignment simply dictates where the elements are positioned within the available space. If both heights are equal, there will not be a noticeable difference.

If you require additional assistance, please provide any existing CSS codes for further analysis.

.row{
  background: #aaa;
  height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid header">
    <div class="row align-items-center">
        <div class="col-md-2 logo">
            <h2>Logo</h2>
        </div>
        <div class="col-md-6">
            <nav class="nav">
                <span>Nav</span>
            </nav>
        </div>
    </div>
</div>

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

Reduce the size of text using HTML and CSS

I'm currently working on replicating an image using HTML and CSS that will be placed beneath the avatar on a forum. Here is what I have managed to achieve so far: https://jsfiddle.net/J7VBV/220/ table.avatarStats { border-spacing: 0; border- ...

htmlcss

PHP script not running as intended

I created an HTML form where users can input values and select options. Once the user has made their selections, these values are then sent to a PHP script on the server. The PHP script retrieves data from a MySQL database based on the user-selected values ...

phpmysqlhtmlajax

Unleash the Power of Your Webpage: Instantly Engage Full

Is there a way to automatically make a webpage open in full screen mode as soon as it is loaded? Here's what I currently have: var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFull ...

javascripthtmlfullscreen

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Is there a way to ensure that an image within nested flex containers has a width of 100% in IE11, even when the container has flex-direction: column? I've tried setting the width to 100% with a max-width of calc(100% - 0.1px), but unfortunately it doe ...

htmlcssflexboxinternet-explorer-11

Pass the callback function `cb_func` as a parameter to the `foobar` function when calling it in the `onclick`

I have an element that I want to trigger an onclick event with a callback function. Here is the code snippet: function cb_func() { alert("hello world!"); } function foobar(i, cb) { // do something if (cb != undefined) cb(); } onclic ...

javascriptjqueryhtml

Guide to displaying a template using Vue.js

Incorporating jQuery and vuejs version 2.3.4: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js The code snippet below demonstrates my current setup: // Instantiating Vue. vueVar = new Vue({ el: '#content', ...

jqueryhtmlvue.js

Having trouble setting a background image for my CSS button

Recently started experimenting with button styles and I wanted to create a design where there is a background image on the left of the button with text located on the right side of the image. Here's the code snippet I've been working on. Here&apo ...

cssbuttonstyling

Using Angular components to manipulate the CSS in the DOM

Struggling with dom manipulation in an angular/node.js environment using typescript for my visualcomponent.html The second inline styling works fine, showing the h1 in blue color. However, I run into issues when trying to embed strings within the innerHTM ...

javascripthtmlcssangulartypescript

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...

htmlcss

The PHP form is all filled up with ones once it has been submitted

I am struggling.... Recently, I developed a PHP form that collects user information and sends it to the website owner. However, after submitting the form, the fields automatically populate with a '1'. This seems to indicate that the field was tr ...

phphtmlforms

Click to shift the div downwards

Currently, I have a piece of javascript applied to a div that directs the user to a specific link: <div style="cursor:pointer;" onclick="location.href='http://www.test.com';"> I am wondering if there is a way to add an effect where, upon ...

javascriptcss

Form featuring two buttons with distinct values for submitting

<form action="here.php" method="POST"> <input type="text" name="text"> <div id="one"> <input type="hidden" name="aaa" value="one"> <input type="submit" value="Send"> </div> <div id="two"> <input type= ...

phpjavascriptjqueryhtmlforms

The background image constantly shifts while scrolling on a mobile device

Just sharing my first post here. There's been something bothering me on my personal website for quite some time. Whenever I visit the site on my Android phone and start scrolling through the page, the background image seems to 'adjust' itse ...

htmlcss

Maximizing spacing for element alignment using space-evenly and :after

I have employed the pseudo-element :after to left-align the last line of a list of blocks, using space-evenly to justify these blocks. However, I am facing an issue where the blocks on the last line do not align properly with the others due to the space ta ...

htmlcss

Move the div with jQuery

I am currently working on making a div draggable without relying on jQuery UI. Here is the HTML code: <div class="wrapper"> <div class="toddler"></div> </div> And here is the script I have written: $.fn.slider = function () { ...

jqueryhtmlcss

Anomaly in SVG Animation Performance

My SVG animation was going smoothly until the final element, which unfortunately ruins the entire thing. What I've created is a hexagon composed of 6 individual triangles, designed to fold out and back in on a continuous loop for use as a loader anim ...

htmlcssanimationsvg

Iterate over JSON dates in JavaScript

Trying to utilize JavaScript in looping through a JSON file containing time periods (start date/time and end date/time) to determine if the current date/time falls within any of these periods. The provided code doesn't seem to be working as expected. ...

javascripthtmljson

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

htmlcsstwitter-bootstrap

What is the reason for JQuery not generating a fresh div during every loop?

I'm currently facing an issue where jQuery seems to be combining all the image divs and description divs into one container div, rather than creating individual containers for each pair in my for loop. This is causing a disruption in the overall layou ...

javascriptjqueryhtml

Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Trying to create a header, sticky footer, and content section with 100% height, but facing issues with the middle height. Below is the code and jsfiddles provided. Using HTML 4.0 strict in IE7 without the option to change. jsfiddle without 100% height: ht ...

csshtmlheightstrict