Achieve a seamless alignment of text/icons at the bottom of a row in BootStrap 4

Looking at this screenshot showing red and blue lines from a Firefox add-on called Pesticide:

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

Here is the code from the screenshot:

<div class="row my-auto">
     <p class="h6">
        <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Particulars - Add Particulars Below</span>
         <span class="align-bottom"></span>
     </p>   
</div>

Hey there, I'm attempting to align the text with the bottom of the row (blue line) instead of the current red line. The goal is to have the text perfectly aligned with the bottom of the row just like the icon.

I've experimented with different Bootstrap classes like my-auto, mb-0, align-*, no-gutter, without success. Any suggestions?

cssbootstrap-4

Answer №1

Personally, I prefer using flexbox for alignment like this. While I'm not a bootstrap expert, you should be able to achieve it using some classes, as shown below.

<div class="row my-auto">
     <p class="h6 d-flex align-items-baseline">
        <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Particulars - Add Particulars Below</span>
         <span class="align-bottom"></span>
     </p>   
</div>

If using CSS, the code would be:

.h6 {
    display: flex;
    align-items: baseline;
}

Answer №2

Give this a shot

<div class="row my-auto d-flex align-items-end">
   <p class="h6">
      <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Details - Include Details Below</span>
      <span class="align-bottom"></span>
   </p>   
</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

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

htmlcsstwitter-bootstrap

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Recently, I stumbled upon an amazing 3D image gallery example created using jQuery and CSS3. http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ Excited by the concept, I attempted to incorporate a zoom effect (triggered every time a user clic ...

javascriptjquerycss

Generate a unique slug in Javascript using the provided name and then show it in a disabled input field

Currently, I am working on a feature to generate a slug dynamically using Javascript. I want my users to be able to preview the slug before submitting the form. Below is the Javascript code I have written: function createSlug(text) { return text .toS ...

javascriptbootstrap-4laravel-mix

Toggle class in Angular ngMessages based on validity, not just on error

As a beginner with ngMessages, I'm curious to know if there is a $valid counterpart for the $error object. In my exploration of the ngMessages documentation in Angular, I have only encountered discussions about the $error object. <form name="conta ...

cssangularjsformsvalidation

Issue with transitioning from Bootstrap 2 to Bootstrap 3 navbar

I am facing an issue with my navbar that collapses perfectly. However, when using the script below to automatically hide the menu upon clicking a menu item: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('.navba ...

jqueryhtmlcsstwitter-bootstrap-3

Enable scrolling for a div positioned beneath another div

I am working with an iPad frame and trying to implement a feature where a larger image scrolls behind it as the user scrolls down the page. Although my CSS is more complex than the example provided in this link, I am struggling to get even that basic funct ...

htmlcss

Change the color of child li to white when hovering over the parent li, and vice versa

Let me start off by explaining the issue I'm facing. Take a look at to get a better understanding of what I'm referring to. It needs to be a specific page, not the home page, so you can see the problem for yourself. Now, when you hover over the ...

jqueryhtmlcss

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

javascripthtmlcss

inconsistencies observed in flex layout between webkit browsers (Chrome and Safari) compared to moz (Firefox)

I am experiencing unexpected behavior with flex on Mozilla (-moz-) and Chrome/Safari (-webkit-) Referenced the Mozilla tutorial to understand flex layout /** { border: solid; border-width: 0 1px; }*/ html, body { width: 100%; height: 1 ...

htmlcsswebkitflexboxmozilla

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

What is the best method to retrieve child elements from a class list object?

Seems like I have a similar content class <div class="parentclass"> <div class="childClass"> </div> <div class="childClass"> </div> <div class="childClass"> </d ...

javascripthtmlnode.jscss

Make the jQuery toggle() function work like a regular radio button when selecting multiple options at a time

I have recently created two radio buttons using <i> font icons. Previously, I had successfully used the same code to create a checkbox, so I applied it to the radio buttons as well. After fixing the positioning, everything seemed fine when interactin ...

javascripthtmljquerycssbootstrap-4

What is the best way to center a grid item in Material-UI within a React application?

I'm struggling with centering a grid element in MUI v5 and aligning a long paragraph to the left side while adding horizontal margin for big screens. Can anyone help me out with this? Thank you. <Box style={{ backgroundColor:" ...

cssreactjsmaterial-ui

Ways to minimize the space between elements in a flex container

My goal is to minimize the space between my images that expand on hover. I aim for it to resemble this: expectation However, the current appearance is more like this: reality This is what I currently have: .container { display: flex; width: 100 ...

cssflexboxmargin

Is there a way to customize the default padding applied to Material-UI components across the board?

I've been struggling with getting the AppBar component to cover the entire area by default. I've searched through the documentation and scoured Google for a solution, but so far I haven't found one that works. I also attempted to adjust th ...

cssreactjsmaterial-uifrontend

Is there a way to restrict a user to selecting just one checkbox in a bootstrap checkbox group?

I am having trouble implementing bootstrap checkboxes in my code. I want the user to be able to select only one checkbox at a time, with the others becoming unchecked automatically. Can someone please advise me on what I need to add to my code? Here is a ...

javascriptjquerycheckboxbootstrap-4twitter-bootstrap-3

Why isn't the input appearing on the succeeding line below?

<label for="email2">Enter Your Email Address</label> <input type="text" name="email2" id="email2" placeholder="example: [email protected]"> <label for="phone2">Phone Number</label> <input type="text" name="phone2" id= ...

htmlcss

Manipulating AngularJS with Sass variables

Currently, I am developing a theme changer using AngularJS and I'm facing difficulty in figuring out how to swap one SASS file with another (both containing variables) when the user changes their theme. I understand that once SASS is compiled to CSS, ...

cssangularjssassnode-sass

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Is there a way to align the line to the right of the text when it's not selected, and have a new line appear on the left side that pushes the text and removes the line on the right side? Here is the design I'm trying to emulate. If you click t ...

htmlcss

Guide on creating frozen columns in an Angular 2 table with the ability to scroll through multiple columns

Within my table, there are 3 columns that must always remain on the left side. Additionally, there is a column containing a grid where each element represents an hour of the day, requiring it to be scrollable. I have attempted various proposed solutions, ...

htmlcsstwitter-bootstrapangular