Aligning elements vertically in Bootstrap 4 with the power of flexbox

Seeking assistance with a frustrating issue in Bootstrap 4:

I tried to implement the align-self-start flexbox alignment using the code from this page . However, the example provided on that page does not seem to work. Is there a simpler way to achieve the same result with different terms? Or is the code snippet I used completely outdated now?

<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>

Appreciate any help you can provide!

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

If you want to visually distinguish between different rows, you can set a minimum height for the row.

.row {
  border: 1px solid red;
  min-height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </div>
    <div class="col">
      One of three
    </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

Utilize SVGs efficiently by loading them once and reusing them

Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...

javascripthtmlcsssvg

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

I am looking to incorporate a footer into my website that stays fixed at the bottom of the screen. However, I have encountered an issue: Here is what I have attempted so far: .footer { position: absolute; width: 100%; background: #0084FF; ...

htmlcss

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

cssbootstrap-4

Issue with Bootstrap Navbar dropdown causing page refresh instead of menu dropdown activation

<!DOCTYPE html> <html lang="en" dir="ltr" style="style.css"> <!-- All icons were courtesy of FlatIcon : www.flaticon.com and FreePik : www.freepik.com --> <head> <meta charset="utf-8"&g ...

javascripthtmlcssbootstrap-5

Disable the scroll bar on a bootstrap modal

<span class="education"style="font-size:170%;line-height:150%;">&nbsp;Education <br> <small style=" color:gray;font-size:60%;">&nbsp; Blue Ridge University,2012-2014 </small> <br> <sma ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

css

Dimension of images within bootstrap column division

I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, e ...

htmlcsstwitter-bootstrap

When closing a Bootstrap modal, the modal overlay does not automatically close along with it

Need assistance with a functionality where new requests can be added and existing requests can be edited using a single component that regenerates with the correct data when needed. Below is the code for the base component: home-component.html <ul c ...

angularbootstrap-4bootstrap-modal

Adjusting the spacing between the logo and navbar in HTML code

I am struggling to understand why this issue keeps occurring: I have thoroughly checked for errors, attempted multiple solutions, yet the problem persists. Please assist body { margin: 0; padding: 0; } .logo { margin: 0; padding: 0; } ul { li ...

htmlcss

CSS: positioning controls at opposite ends of a table cell

I need help with styling a button and textbox inside a table cell. Currently, the button is stuck to the textbox, but I want them positioned at opposite ends of the cell. How can I achieve this? <td style= "width:300px"> <asp:TextBox ID="Tex ...

htmlcss

What is the most effective method for integrating Bootstrap CSS into an Angular project?

When incorporating a Bootstrap CSS file into an Angular project that has already been added using yarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc3dcc3">[email protected]</a>, th ...

cssangularbootstrap-4

How can I align an image and text alongside another image using HTML and CSS?

Having some trouble positioning an Image and Text next to another Image. Check out an example here: I attempted using floats, but it doesn't seem to be working. Here is the code I have: .left {float: left;} .right{float: right;} <div class="left ...

htmlcss

Equal row sizes in the Bootstrap framework

I am trying my best to explain the situation. Currently, I am utilizing bootstrap for a project where I have two columns - one containing an image on the left and the other with a title and description on the right. My goal is to make the photo fill the en ...

htmlcssimagetwitter-bootstrapbootstrap-4

Issue encountered while trying to modify the color of a placeholder

Whenever I attempt to modify the placeholder's color: ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } : ...

htmlcsspseudo-elementpseudo-class

How to successfully pass a Bootstrap dropdown value back to Flask

I need assistance with extracting a selected value (player) from a dropdown menu. The goal is to send this 'player' value to Flask upon selection, and then render the corresponding player's image on the website. HTML: <form method="P ...

htmlpython-3.xflaskbootstrap-4

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link? <a href="www.link.com">CATEGORY NAME& ...

javascripthtmljquerycss

Place the text below the adaptable div

Could anyone offer guidance on how to properly align text underneath responsive images within divs? The issue I'm facing is that the divs adjust smoothly based on the viewport size, but the text below them doesn't stay centered as intended. Whi ...

htmlcssflexbox

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: https://i.sstatic.net/UNtEP.png In the Header.css file, I have defined a class: .mainHe ...

cssreactjstypescript

Incorporating Masonry-inspired images into a website's design section

I have been working on incorporating a masonry layout of images into my website, but I am facing alignment issues. The images are simply stacking on top of each other instead of creating the desired masonry effect. Are there any tips on how to create a mas ...

htmlcssmasonry