How can we ensure all elements in a row are aligned at the top?

My goal is to position the elements in a row, which is enclosed within a container, at the top of that row.

Here is the current structure of my HTML:

<div class="container">
    <div class="row">
        <div class="ticket">
           <!-- content -->
        </div> 
    </div>
</div>

The CSS styling for the ticket element is as follows:

<style>
    .ticket{
        border:5px solid black;
        border-radius: 15px 50px 30px 5px;
        width:20%;
        height: fit-content;
        display:inline-block;
        clear: left;
        margin-left:30px;
        background-color:#eee;
    }
</style>

"row" and "container" classes are part of Bootstrap framework.

I am attempting to align the 'tickets' with the top (red line) on this image

I have experimented with using align-content and align-items, but so far they have not yielded the desired effect. I would appreciate any assistance regarding this issue. Thank you.

htmlcssbootstrap-4

Answer №1

To align the items at the start of the flex container for tickets, you can use the following code:

.ticket {
  display:flex;
  align-items:flex-start;
}
.tick {
  padding:20px;
  border:4px solid #000;
  margin:50px;
  border-radius:0 30px 0 0;
}
<div class="container">
    <div class="row">
        <div class="ticket">
           <div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur!</div>
          <div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus</div>
          <div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </div>
        </div> 
    </div>
</div>

Answer №2

Here is an example of CSS code you can try:

.ticket { 
   display: flex;
}

.item-in-container { 
  #flex: 1;
}

If you want the items to have the same width, uncomment flex: 1;

Answer №3

By utilizing the default settings of bootstrap, the content is set to align with the top:

.ticket  {
  height: 100px;
  background-color: red;
}

.ticket:nth-child(2)  {
  height: 70px;
}

.ticket:nth-child(3)  {
  height: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="ticket col-3 m-3"></div>
    <div class="ticket col-3 m-3"></div>
    <div class="ticket col-3 m-3"></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

Insert a picture within the text input field

I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...

javascriptjqueryhtmlcss

How can I set the input tag to reset back to 1 when a certain event occurs?

I am currently developing an HTML Snakes And Ladders game. On the settings screen, there is an input field where users can select the size of the board. Depending on their choice, they will be able to choose a maximum number of snakes and ladders. For exa ...

javascriptjqueryhtmlajax

Javascript: Troubleshooting Unexpected Variable Behavior in HTML Code

My issue is as follows: I am attempting to retrieve text from a JSON file in my HTML. In the header of my HTML, I have linked a tag with the following code: var language = ""; var langDoc = null; //Function to change the value function setLang() { v ...

javascripthtmljsonvariablesnull

Do I need to utilize a Form element?

<p>text 1<span>additional information 1</span><span>more details</span></p> <p>text 2</p> <a> hyperlink </a> <button>submit</button> <p>yet another paragraph</p> Greeting ...

html

Having trouble with your jQuery slideDown menu?

I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...

jqueryhtmlcss

Tips for positioning the title of a card in Bootstrap-Vue

I'm currently working with the <b-card> component from bootstrap-vue and encountering an issue where I am unable to center align the title property. Does anyone have a solution for this problem? Below you can find the structure of my card, which ...

htmlvue.jsbootstrap-4bootstrap-vue

"Challenges with Full-Width Dropdowns in Multi-level Mega Menus

I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...

htmlcssdropdown

Using jQuery for Page Navigation - incorporating an active class in a specific section of a fresh webpage

One of my clients recently requested that I implement sectional page navigation, and the code below successfully addresses this request. When a user triggers an internal page link or uses the sectional navigation (.menu), the state of the sectional navigat ...

jqueryhtmlasp.net

Chrome scrolling causing Webkit mask to shift position

I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle: http://jsfiddle.net/DZTvR/13/ However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Op ...

htmlcssgoogle-chromewebkit

Achieving a transparent background in WebGLRender: A guide

I've been experimenting with placing objects in front of CSS3DObjects using the THREE.NoBlending hack. However, in the latest revisions (tested on r65 and r66), I only see the black plane without the CSS3DObject. Here is a small example I created: in ...

javascripthtmlgraphicsthree.js

The HTML form option value is limited to storing the first word from the MySQL database

I managed to successfully load a dropdown question html form with data from my database. However, there seems to be an issue where only the first name is displayed when selecting an option, even though both the first and last names appear in the menu. $sq ...

phphtmlmysqlformsecho

Ways to resolve the issue of truncated lines while displaying HTML content in WebView on Android devices

When displaying content in a WebView, I am encountering an issue where the top and bottom lines are being cut off. What steps can I take to resolve this problem? My current approach involves using HTML to present data within the WebView. ...

androidhtmlwebview

Achieve a top position in CSS layout without resorting to negative values

This may seem like a simple thing, but I'm struggling to achieve it without using negative values for padding-top. Here's how my site looks: Here is the CSS code I am using: .center { width: 1030px; margin: 0 auto; } .top-panel { backgr ...

htmlcssmarginpadding

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

javascriptjqueryhtmlcss

How can I guarantee consistent UTF-8 encoding in Nokogiri parsing, ERB templates, and encoding HTML files using Ruby?

After successfully parsing parts of a website, I encountered an issue with UTF8: get '/' do url = '<website>' data = Nokogiri::HTML(open(url)) @rows = data.css("td[valign=top] table tr") erb :muster I am now attempting ...

htmlrubyparsingutf-8nokogiri

Expand a div in navigation using JQuery

Check out this code snippet: .container { width: 150px; height: 100px; } .test { color: white; background-color: red; width: 100%; height: 25%; transition: height ease 1s; } .test:hover { height: 100%; } <div class="container"> ...

javascriptjquerycss

Experience a dynamic 3D visualization directly in your web browser

I have a vision to develop a website that offers users the ability to immerse themselves in a 3D environment to explore various room furnishings directly in their web browser. Rather than starting from scratch, I am interested in leveraging existing open s ...

htmlthree.jswebgljava-3d

How come Angular8's routerLinkActive is applying the active class to both the Home link and other links in the navigation bar simultaneously?

Currently, I am facing an issue with routing in my project where the home tab remains active even when I click on other tabs. I have tried adding routerLinkActiveOption as a solution, but it doesn't seem to be working for me. <ul class="nav nav-ta ...

htmlangulartypescriptangular-ui-bootstrap

What is preventing me from viewing my cards in flex or grid layout?

Recently, I created cards for my team members, but encountered layout issues despite using CSS Flexbox and CSS3 Grid. Although both are supported by my browser, the problem persists. However, the layout works perfectly on mobile devices! I experimented wi ...

htmlcssweb

Having trouble locating an element on a webpage? When inspecting the element, are you noticing that the HTML code differs from the source page?

I'm having trouble locating a specific element on a webpage. When I use the Inspect Element tool, I can see the HTML code with the element id = username, but when I check the page source, all I see is JavaScript code. Does anyone have any suggestions ...

javascriptpythonhtmlselenium-webdriver