Achieving Vertical Alignment of Content in Bootstrap 5

I've experimented with different approaches based on search results, StackOverflow suggestions, and examining existing code snippets.

Here is the snippet of code I am working with:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4f5448544a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="table-row row d-flex flex-column align-items-center">
  <div class="col">
    <span class="align-middle">
      <button type="submit" class="searchbtn emailRemoveBtn float-start align-self-center" name="command" value="Delete email @i">
         <i class="fa-solid fa-xmark sm"></i>
         <span aria-hidden="true"></span>
      </button>
    
      <input readonly class="align-self-center" style="border-style: hidden;" />
    </span>
  </div>
</div>

The issue I'm facing is that the emails within this snippet are not vertically centered as expected:

As a beginner in coding, I believe it might be a minor oversight. Can you spot what I am missing to achieve vertical centering for the email elements?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

  • Avoid combining the use of flexbox and floats.
  • Floats should only be used for wrapping text around images, not for structural layout.
  • Do not implement table row layout unless working with tabular data.
  • Avoid using rows along with explicit flex layout, as Bootstrap 5 rows already have flexbox applied. If you only have one column per row, consider applying similar principles to grid rows.
  • justify-content aligns content along the primary flex axis, not align-items.
  • Utilize Bootstrap's border classes to remove borders. Custom styles should be added to custom classes rather than directly in the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fbfcad1cdd1cf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="d-flex flex-column justify-content-center mt-1 py-2  bg-secondary">
  <div class="text-center">
    <button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email @i">
       <i class="fa-solid fa-xmark sm"></i>
       <span aria-hidden="true"></span>
    </button>

    <input readonly class="align-self-center border-0" />
  </div>
</div>

<div class="d-flex flex-column justify-content-center mt-1 py-2 bg-secondary">
  <div class="text-center">
    <button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email @i">
       <i class="fa-solid fa-xmark sm"></i>
       <span aria-hidden="true"></span>
    </button>

    <input readonly class="align-self-center border-0" />
  </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

Performance Issues Arise with Rapid Clicking [jQuery]

Having trouble with a gallery script I created that includes thumbnails, a large image, and navigation arrows. When you rapidly click on thumbnails or arrows during the transition, it causes delays in the process. The more clicks you make, the more noticea ...

javascriptjqueryhtml

Tips on assigning a reference to an element that has not been rendered yet

I've created a login page with a button labeled "Watch the video". When the button is clicked, it hides and reveals a video player. My goal now is to automatically start playing the video once it's displayed without requiring an extra play button ...

htmlcssreactjsmaterial-uirefs

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

Hi there, I'm having an issue with Bootstrap and Sass when trying to add new colors to my theme map. Can anyone help me figure out what I might be doing wrong? Thank you in advance. I've been attempting to include a new color in the theme-colo ...

csssassbootstrap-5theming

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

javascriptphpjqueryhtml

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

javascripthtml

The contents within the div element exceed the width of its parent element

Hey there, I'm currently working on a Rails application to showcase some links in a horizontal layout. The links are indeed displaying horizontally without wrapping, just as intended. However, I've noticed that the containing div is wider than th ...

htmlcssruby-on-rails

In jQuery, conditionally nest divs within another div based on a specific requirement

There is a container with multiple nested elements that need to be rearranged based on the value of their custom attribute. The goal is to reorder those elements at the end of the container if their 'data-keep-down' attribute is set to true, usin ...

javascriptjqueryhtml

Guide to Changing the Value of a Textbox Using Form jQuery

For instance: <form id="example1"> <input type="text" name="example_input"> </form> <form id="example2"> <input type="text" name="example_input"> </form> In the code above, both text boxes have the same name. H ...

javascriptjqueryhtmlforms

Tips for locating a specific HTML element within a string

Trying to convert a website into a phonegap app is proving to be challenging for me. When I send a request to the server, it responds with the HTML content as text. My goal is to extract certain HTML elements from this text and then append them to a div in ...

javascriptjqueryhtml

What is the best approach for maximizing user experience: setting a maximum screen width or allowing for auto-width?

I manage a blog with responsive design that adjusts to the width of the screen. The majority of our blog posts consist of lengthy content, often reaching over 1000 words, along with user comments. My main concern is about the reading comfort and usability ...

htmlusability

What is the best way to use a handlebar ternary operation to dynamically add an HTML element in AngularJS?

Please Note: When I refer to "handlebars," I am not talking about Handlebars.js, but rather the double curly braces. I have a table where I need to display data in one of the columns along with an additional HTML element based on the result of a ternary o ...

javascriptjqueryhtmlangularjs

Extracting null data from web scraping using Python and Beautiful Soup

I'm currently facing challenges with extracting the correct values from a website that provides prices for Silver, Gold, Palladium, and Platinum. You can find the website here. Below is the HTML structure of the website: <div id="header-tab ...

pythonhtmlweb-scrapingbeautifulsouppython-requests

Category-Specific Page Display

Can anyone help with CSS coding using Wordpress Elementor to make a page only display posts from the coaching category? I attempted to use this selector article.type-post:not(.category-coaching) { display: none; }, but it doesn't seem to be functi ...

csswordpresscategorieselementor

How to merge text (string) with date in HTML using JavaScript

I am attempting to blend a day with the phrase "this is the day" in HTML. I gave it a shot, but the concatenation didn't work as expected. ...

javascripthtml

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...

htmlcssresponsive-designhidden

Guide to displaying a confirmation prompt in c# programming

I need to create a confirmation window similar to confirm() in JavaScript that will pop up when a button is clicked. If the user selects "YES", I want to execute some C# code. How can I achieve this? EDIT: here is the code snippet that I have: SCRIPT: & ...

c#htmlasp.net

The appearance of the website varies across different web browsers

My current project involves creating a portfolio showcasing my work, but I've encountered an issue: When you visit my website and click on the "About" link, the text at the bottom of the tab is displayed differently in Chrome compared to IE and Firef ...

jqueryhtmlcsscross-browser

Top tip: Utilize jQuery for the most effective method of adding content to the HTML of a paragraph situated

One interesting challenge I'm facing involves a textarea that stores dynamic HTML content within paragraph (p) tags. Initial HTML: <textarea rows='7' class='form-control' id='comments'><p>My variable HTM ...

javascriptjqueryhtmlreplaceparagraph

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Upon selecting a background color from the dropdown menu, I am generating a dynamic dropdown for text colors. The Text Color dropdown is populated correctly based on the selection of Background Color. Although the functionality works as intended, I encoun ...

javascriptphpjqueryhtml

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...

css