over line up text align on the baseline with hr

I'm looking to make sure the text is positioned just above the hr tag, similar to how the logout button appears with bootstrap. This is the desired outcome:

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

Here's the code I have using bootstrap :

        <div className="position-relative">
            <hr/>
            <div className="position-absolute end-0 bottom-0 d-flex">
              <p className="align-baseline //not working">Logged in as {user?.email}</p>
              <button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
            </div>
        </div>

Appreciate any assistance

#Edit : after adding mb-0 to my p tag : https://i.sstatic.net/DEhpR.png

cssbootstrap-5

Answer №1

If your <p> element in the image has some margin-bottom, simply add the Bootstrap class mb-0 to the <p> tag.

To align the <p> element at the bottom, you can use align-items-end on the parent div for flex content alignment.

I also included a small padding to prevent it from sticking directly to the bottom of the container.

You can view the updated code and result on JSFiddle: Link

Update: Following G-Cyrillus' suggestion, you can achieve the same result with less code by making slight structural adjustments. See the updated version here: Updated Link

Answer №2

Within the d-flex class, both <p> and <button> elements are included. To align these items together, you can make use of the align-items utilities on flexbox containers. This allows for adjusting the alignment of flex items along the cross axis (which is the y-axis initially, but switches to the x-axis if flex-direction is set to column).

<div class="d-flex align-items-center">...</div>

To explore additional resources on this topic, you can visit this link.

Answer №3

Using flex and order properties instead of absolute positioning may be a better solution in this case.

Here is an example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="d-flex flex-column"><!-- make it a flex column to use order -->
      <hr class="order-2 m-0" /><!-- resets margin & order -->
      <div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
        <p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
        <button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
      </div>
    </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

Click to reveal sliding menu bar

Trying to create a sliding menu bar (.top-bar) that activates when clicking an arrow (#hide), causing the arrow to also slide up and switch from an up arrow to a down arrow. Here is my unsuccessful attempt: $(document).ready(function(){ $("#hide").c ...

jqueryjquery-uihtmlcss

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

Using an inline-block within a positioned absolute element

I am curious about the behavior of inline-block elements inside absolutely positioned elements. To better explain, I have provided an example below. We can see in the code snippet why the .icon within the .tag is not displayed like the previous .icon (whic ...

htmlcsscss-position

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

Using CSS alone to maintain responsive aspect ratios: A solution to filling container heights

I'm trying to find a way for an inner div to fill the height of its container with a fixed aspect ratio of 1:1. The usual method using padding works great for filling the width, but not so much for the height. Is it possible to achieve this purely wi ...

htmlcssresponsive-design

I am looking to incorporate a 10 px border at the top of my column by utilizing bootstrap4

How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns: <!doctype html> &l ...

htmlcssbootstrap-4

Make the table width 100%, but we don't want the central cell to be stretched

My table contains a central image cell that spans two rows: <table width="100%" style="text-align:center"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="2"><img src="http://www.skrenta.com/ima ...

htmlcss

Quickly switch between pages as they load

In Chrome, I'm experiencing a white flash between page loads that is causing transitions to appear choppy. I've taken various steps to optimize the site, such as using image sprites, reducing image sizes, minifying CSS, ensuring correct CSS loadi ...

javascripthtmlcssoptimizationdom-events

Unable to align my navigation bar in the center

My navigation bar code is not centering on the website. Even after removing float: left, it doesn't move to the desired position. Can anyone help me with this issue? Thank you. css ul#list-nav { list-style: none; margin: 20px auto; paddi ...

htmlcss

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

Achieving consistent spacing between elements within a column in Bootstrap 5

Picture a bootstrap column filled with various elements such as divs, paragraphs, and links. How can I evenly space these elements inside the column without using margins or padding? I am looking for an automatic way for the elements to be spaced equally a ...

htmlcssbootstrap-5

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

Adding space between Bootstrap columns to align them one below the other on small devices

https://i.sstatic.net/turhY.png Within this illustration, there are two columns - one with the class col-sm-3 and the other with col-sm-8, situated in a single row. Upon resizing the window (as shown in the screenshot provided), the two columns appear ...

htmlcssbootstrap-4

Is there a way to adjust the container width to 1440px while also ensuring that the columns remain responsive with the help of Bootstrap 4 and SCSS?

Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...

cssbootstrap-4sassresponsive-designgrid

How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure: <div class="row"> <div class="col-md-2" ...

jqueryhtmlcsstwitter-bootstrap

Challenges with Bootstrap positioning in the content

I am relatively new to the world of HTML/CSS/Bootstrap, but I am eager to learn and eventually incorporate JavaScript for an idle game project. The challenge I'm facing is aligning my content next to the navigation bar under the "Welcome Back" headin ...

bootstrap-4bootstrap-5

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

pythoncssplotly-dashbootstrap-5

How can I set a minimum height for a table on my website?

Is there a way to make a table that is at least 50px in size, but can still enlarge if there is a lot of text inside? I'm not sure if this even makes sense, but any help would be appreciated. Thank you! ...

css

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

On my webpage, I have implemented a tabs component called b-tabs. This component is enclosed within a parent div with a specific height. I am trying to make the content of the tabs take up the full remaining height of the parent component. https://i.ssta ...

cssvue.jsbootstrap-4bootstrap-vue

Eliminate styling that is specific to certain browsers

Recent browser updates have introduced new styling and functionality to input[type=number], including up and down buttons. In Chrome, I was able to eliminate this added styling by accessing the shadow DOM and identifying the specific element. However, de ...

htmlcssfirefoxbrowser