Issue with align-items-* class in Bootstrap 4 causing alignment problems

Currently in the process of constructing a website utilizing the Bootstrap 4 framework and encountering difficulties with aligning items properly.

For instance:

Refer to Bootstrap 4 official documentation for row positioning

Compare to my row positioning

Following the code in the docs:

    <div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Previous solutions suggested adding the min-height property to the parent class, but this did not resolve the issue.

Apologies for what may seem like a basic question, as I am a newcomer to bootstrap.

Thank you for taking the time.

cssbootstrap-4

Answer №1

The height of the parent div, specifically the div.row, is determined by the content inside it. This is why the divs you are trying to align vertically are not able to align properly due to lack of space.

In the example provided, you can see the pink background of the div.row, which has a minimum height of 10rm.

Refer to the image below:

https://i.sstatic.net/GIxas.png

Essentially, you need to specify a height for the elements to align in the vertical space.

Here is a simple example:

.row {
  height: 5em;
  border: 1px solid;
  margin: 10px 0;
  background-color: orange;
}

.container>.row>div:nth-child(1) {
  background-color: red;
}

.container>.row>div:nth-child(2) {
  background-color: blue;
}

.container>.row>div:nth-child(3) {
  background-color: brown;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">


<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Answer №2

I've addressed this issue previously in a different post.

Vertical alignment is dependent on height. In your scenario, the columns within the row are all of uniform height, leading to consistent alignment. To achieve varied vertical alignment, you must either specify a height for the .row, or introduce content in the columns that alters the row's height...

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

Utilizing button clicks to send fetch commands and extract data from websites

I need help with my Google Chrome extension. I have some fetch commands for an API, but I'm not sure how to send them when a button is clicked. Can someone guide me on the right approach? Is there a recommended method for a Chrome extension to extrac ...

javascripthtmlcssgoogle-chrome-extension

What steps can I take to make sure that the content on my website is properly sized to fit within the browser window?

I'm currently working on a website project for my college assignment and I could really use some assistance with a significant issue that I've encountered. Whenever I open the html file of my website on my MacBook, which has a screen resolution ...

htmlcss

Overflow on flex layout causes line breaks

I am facing an issue with two divs in a flex container where I want them to be displayed on separate lines when they overflow .container { background: wheat; padding: 10px; width: 300px; display: flex; justify-content: space-betwee ...

css

Creating manageable CSS styles for a wide variety of themes

I need to add themes to a web application that allows users to switch between them seamlessly. The designers want a variety of font colors and background colors, around 20 in total. Is there a way to achieve this without creating multiple .css files, which ...

javascripthtmlcssthemes

Incorporate hover, onmouseover, and onmouseout features into a CSS class with proper syntax

I'm struggling with the fundamentals of syntax. I am attempting to utilize jQuery in order to target all elements within a certain CSS class, and then apply a function when the user hovers over the item. $(".item").hover(function(){$(this).fadeTo(100 ...

javascriptjquerycss

What if we started using PT as the standard unit for measuring fonts and element size?

Currently, I am in the process of creating a mobile app that will work across different platforms using jQueryMobile and PhoneGap. My initial focus is on developing for Android. When it comes to Android app development, it is recommended that developers u ...

androidcssjquery-mobilefont-size

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

I am attempting to properly arrange my navigation links and logo in alignment

I need help aligning the logo in the exact center while keeping the navigation links as they are. Here is how it currently looks: https://i.stack.imgur.com/qOgVJ.jpg My CSS: .logo { display: inline-block; text-align: center; } na ...

htmlcss

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

Why won't applying a binding style affect the appearance of my Vue component?

const EventLevelBoard = { name: "EventLevel", data: { levelStyle: { display: "block" }, levelStyleinner: [ { display: "block" }, { display: "block" }, { display: "block&qu ...

javascriptcssvue.jsvuejs2vue-component

The Bootstrap Navigation seamlessly expands beyond the boundaries of the viewport width

Currently experimenting with Bootstrap for the development of a customized Wordpress theme. Upon uploading the website, encountered an issue where the menu button expands excessively towards the right, specifically on mobile devices. Below is the code sni ...

twitter-bootstrapbootstrap-4

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

How can I display a preview of another page within a div container without actually making the text clickable? I want the preview to show when the mouse hovers over specific text, but I need the original text to stay on the main page. I've experiment ...

javascriptjqueryhtmlcss

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

javascripthtmlcssgoogle-analytics-apiab-testing

Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations. <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item ...

htmlcssbootstrap-4

Looking for a reliable tool to check your CSS classes and tidy up your code effectively?

It seems like a common issue with a straightforward solution. I have numerous CSS selectors scattered across various files, many of which may be unnecessary and a directory full of HTML files. My goal is to identify all redundant selectors in my CSS within ...

css

The leftward relocation of 3 boxes is required

Help needed! I created 3 boxes that appear upon clicking a button, but they are not aligned properly. They need to be shifted a bit to the left. My attempt to adjust this using a large div with left:5%; did not work. If you're unsure about the issue, ...

htmlcss

Text that is not aligned in the middle and has a colored background

After setting up a flexbox container with some flex-items, I encountered an issue: When clicking on either "Overview" or "Alerts", the white background border is not displayed. To highlight the selected item, a class called .selected is triggered which ad ...

cssreactjsflexbox

When applying a gradient on top of an image with background-image, the gradient appears larger in size compared to

Struggling with HTML <div class="outer"> <div class="bgimagegradient"></div> <img src="foo.jpg"> <div> .backgroundimage { position: absolute; right: 25px; z-index: -100; ...

cssgradient

Positioning of the footer using CSS: A query

What is the best way to position a footer if we know its height? For instance, if the height of the footer is 100px: footer { position:absolute; bottom: 100px; background: red; } If this approach is not recommended, could someone assist m ...

css

Sidebar content alignment vertically

Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space. Current setup includes: ...

htmlcsstwitter-bootstrapbootstrap-5