What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you.

CSS:

.alert {
  margin-bottom: 1px;
  height: 45px;
  line-height: 45px;
  padding: 0px 15px;
  font-size: 15px;
}

HTML:

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Success! Your application was submitted!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Result:

https://i.stack.imgur.com/tNXMk.png

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Remember to apply mt-2 for margin-top: .5em; to your button.

.alert {
  line-height: 45px;
  font-size: 15px;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f607f62">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Success! Your application was submitted!
  <button type="button" class="btn-close mt-2" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Quick tip - using height, line-height, and padding with Bootstrap can be redundant. Consider utilizing Bootstrap Text Utilities to streamline your CSS. For instance, try using lh = line-height and fs = font-size.

Answer №2

You may want to adjust the height of the .btn-close element in this code snippet. After experimenting with different heights, I found one that worked well for me.

.alert {
  margin-bottom: 1px;
  height: 45px;
  line-height: 45px;
  padding: 0px 15px;
  font-size: 15px;
}

.btn-close {
  height: 5px;
}

Answer №3

To avoid overwriting an existing bootstrap class, a new class can be added to customize the padding as shown below:

    <style>
        .alert {
          margin-bottom: 1px;
          height: 45px;
          line-height:45px;
          padding:0px 15px;
          font-size: 15px;
        }
        .alert >.extra {
            padding: 0.8rem 1rem;
        }
      </style>

    <div class="alert alert-success alert-dismissible fade show" role="alert">
            The activator phrase was successfully registered!
            <button type="button" class="extra btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </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

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

Tips for deleting directory path from a file name

Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...

phphtml

Disregarding the Syntax of jQuery Mobile

Is there a way to override jQuerymobile's formatting and classes when styling an element? I want to apply my own custom style. I attempted using $.mobile.ignoreContentEnabled = true; in the pageInit function, followed by adding data-role="none" to th ...

jquerycssjquery-mobile

The table is overflowing its parent element by exceeding 100% width. How can this issue be resolved using only CSS?

My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...

htmlcsshtml-table

Is there a way to alter multiple classes using hover effect on a single class without the use of JavaScript, only employing

Hello there! I have a question about applying styles to specific classes when hovering over certain elements. Unfortunately, I am unable to make changes to the HTML files and can only work with the CSS file. Take a look at the image below for reference: ht ...

htmlcsshover

Showing information from a table for editing purposes with the use of HTML input tags

As I navigate my way through the complexities of HTML and PHP coding, I’m faced with a challenge in displaying database content on an editable table within my web page. Clicking the edit button should lead to a separate page where data can be modified. ...

javascriptphphtmlcss

The border of the cell in the top row only partially overlaps with the margin area

Have you noticed how the left border of the first cell doesn't line up with the margin area of the table? This peculiar phenomenon seems to occur only in the first row: https://i.stack.imgur.com/qMWCh.jpg In all other rows, the border aligns proper ...

css

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5

Understanding the purpose of the notched property in Material-UI

I am currently integrating Material-UI into a project and exploring their API. One thing that I find confusing is the notched property within the OutlineInput Component. <FormControl variant='outlined'> <OutlinedInput notched={false} ...

htmlcssreactjsmaterial-ui

The use of event.returnValue is outdated and no longer supported. It is recommended to use the standard event.preventDefault() method instead. You may encounter

Hey there :) Currently, I am utilizing JQuery 1.9.1.js to search records using JSON. I am able to retrieve the search list locally, but when attempting to publish it on Windows Server 2008 and IIS 7, I face issues as it throws an error stating "event.ret ...

jqueryjsonhtmlasp.net-mvc-4

Angular2 scripts are failing to load in the web browser

Setting up my index page has been more challenging than I anticipated. Take a look at my browser: https://i.stack.imgur.com/L4b6o.png Here is the index page I'm struggling with: https://i.stack.imgur.com/Op6lG.png I am completely stumped this tim ...

javascripthtmlangularjsnode.jsmean

Transforming Button style in jQuery Mobile version 1.3.0

There are reports of a new function in jQuery Mobile 1.3.0 that allows for dynamically changing button themes using JavaScript: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ However, upon attempting to run the provided code snippe ...

jqueryhtmlcssjquery-mobilejquery-mobile-button

Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards. .product-slider { margin-top: 16px; text-align: center; } .slide-item { list-style-type: none; display: inline; ...

htmlcsshtml-lists

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

What steps can I take to enhance my script and prevent the password field from being displayed alongside the username

I am currently working on a script that dynamically displays your username in the Login button as you type it. However, I have encountered an issue where the password is also being displayed, which is unacceptable. Additionally, I would like to enhance my ...

javascripthtml

Tips for developing a sophisticated HTML quiz

I have spent countless hours perfecting this quiz. I have successfully created a quiz that reveals solutions at the end, but I want to take it one step further. I envision the answers appearing after each incorrect response from the user, and no answer sho ...

javascripthtml

My PHP code keeps prompting me with an "invalid password" message even though I am confident that the password is correct

As part of a project at work, I am creating an intentionally flawed application to showcase common security vulnerabilities. This application is designed to demonstrate improper practices and may even entice those looking to exploit it. We have robust logg ...

phphtmlsql-server

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

I am facing an issue with the DOM object in my ejs template when used under the script tag. How can I resolve this problem?

<%-include ("partials/header.ejs") %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <header> <!--NAVIGATION BAR--> <img class="calender-pic" src="images/calendar.png ...

javascripthtmlnode.jsexpressejs

Content below divs that are fixed and absolutely positioned

I have a design layout similar to this (a small snippet) and I am facing an issue where the text within .content is not clickable. The positioning of #gradient is fixed due to the background image, and #empty has an absolute position to cover the entire bo ...

css