Unwanted bottom padding appears in Bootstrap 4 alerts outside of containers

Struggling to design a sleek fixed bootstrap 4 alert?

The issue I'm facing is that the alert displays unwanted bottom padding when it's not placed inside a container. However, since it needs to be fixed and auto-centered, placing it within a container isn't an option.

Here's the CSS code I'm using:

#alert {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

Check out my JSFiddle example for reference: https://jsfiddle.net/81vhy56o/

Any ideas on how to resolve this?

csstwitter-bootstrap

Answer №1

Upon inspecting the element, it is evident that a margin is present rather than a padding. To address this issue, simply apply the class mb-0 to the 

<div class="alert"></div>
, which will set margin-bottom: 0 !important;. If you wish to eliminate padding as well, you can include pb-0.

#alert {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
  <head>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div id="alert" class="alert alert-warning alert-dismissible mb-0 pb-0">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      Hi! I'm a test alert!
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>

Answer №2

create a custom class called .alert-dismissible .close and apply padding-bottom:0 to it 

.alert-dismissible .close{
    padding-bottom: 0;
}

also, in the #alert id, include padding-bottom:0

#alert {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 0;
}

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

Achieving Horizontal Alignment of jQuery within HTML utilizing CSS

I'm struggling to center the ASlider Jquery plugin () that I've added to my website's HTML code using CSS. No matter what I try, it stubbornly remains fixed to the left side of the page. I attempted using CSS properties like float, display, ...

javascriptjqueryhtmlcss

Choose all form styles excluding one that does no have a defined action using css

Looking to create a CSS rule that applies to all forms except for one with a specific action. Currently, I have the following CSS code that hides all #NavMenu forms but shows them for the search form: form #NavMenu{ display:none; } form[action*='Sea ...

htmlcss

Create a circular modal for the design

I am interested in creating a modal that has a circular shape instead of the typical rectangle with rounded corners. This means it should appear as just a simple round container with the modal-body content in the center, without any modal-header or modal-f ...

javascripthtmlcsstwitter-bootstrapbootstrap-modal

My body's padding-right is being altered by Bootstarp/CSS Popup

This is the padding for my body content. https://i.sstatic.net/LG7IE.png <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true" style="padd ...

htmlcssbootstrap-4bootstrap-modalpadding

I am currently utilizing VScode and attempting to connect to an asset, but I noticed that two characters in the link appear yellow instead of orange. What could

Could the usage of a Bootstrap CDN be the reason for this issue? Although it was an easy fix, I am still curious. Was it caused by simply copying and pasting the code? ...

cssvisual-studio-codebootstrap-4

Adjusting the height of a CSS div to be 0 while also modifying the

I have encountered a unique dilemma <div class="parent"> <p>stuff stuff stuff</p> </div> Using CSS, I set the width and height of parent = 0; because I intend to modify it when a button is clicked. However, for this purpose, I ...

css

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...

javascripthtmlcssresizablejquery-resizable

The flexbox layout is not properly stacking div rows in a column

Objective: Creating a flexbox layout with a responsive background image that adjusts in height when the screen size changes, causing elements to wrap; In addition, there is a fixed header bar at the top of the page. The layout consists of a full-screen co ...

htmlangularcssflexbox

Issue with JQuery click() not triggering on a specific div button

I am attempting to replicate a user's click on a website where I have no control over the code. The specific element I am trying to interact with is a div that functions as a button. <div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-dis ...

javascriptjqueryhtmlcsssimulation

I have a specific resolution in mind where I want to run jQuery code during window scrolling

I have a jQuery code that I want to run only when the resolution is greater than 950px. If not, I risk losing the responsive logo. My goal is to create a navigation bar similar to the one on the Lenovo homepage. $(document).ready(function(){ //left ...

javascriptjqueryhtmlcss

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

phpcsswordpress

What is the best way to add a triangle pointer to the Vuetify v-menu component?

Is there a way to insert a triangular pointer into the v-menu component of Vuetify 2.x? I am referring to this common feature found on web pages (as seen in this screenshot from Github): https://i.stack.imgur.com/DMOjF.png I have included sample code he ...

cssvue.jsvuetify.js

Utilize CSS :hover for revealing and concealing HTML elements

Why does the (.nav-element>a:hover) in the given code work properly, but the (.nav-element>a:hover .nav-dropdown1) does not seem to respond? I have attempted various methods to activate it, but is there an issue with the syntax in the rule that is ca ...

htmlcsshover

Ways to limit the extent of inline CSS styling?

I am working on a project where I need to apply unique CSS to each item in a list dynamically. Each item will have its own set of CSS rules specifically tailored to its elements. <div id="thing1" class="vegas"> <style> p { font-size: ...

javascriptjqueryhtmlcss

Why is it that aligning items in a row doesn't seem to function properly when I apply a custom class to a container-fluid in Bootstrap 4?

Recently, I started delving into the world of front end development. After mastering the basics of HTML5 and CSS3, I ventured into Bootstrap 4. My current project involves creating a replica of the Facebook login page. To achieve a full-width design, I uti ...

htmlcssbootstrap-4vertical-alignment

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

I'm currently utilizing CodeIgniter 3 and dompdf to convert an HTML view into a PDF. While I am able to successfully convert the HTML to PDF, the proper styling is not being applied. All necessary CSS files have been included as custom design in the v ...

cssimagecodeignitercodeigniter-3dompdf

Guide on Disabling Horizontal Scrolling in a Website's Navigation Bar Using Bootstrap

Instead of disabling my horizontal scroll completely, I want to remove the scroll from specific elements like my NavBar. When I scroll, the Navbar moves along with it which ruins the design. I only want the horizontal scroll to be enabled for certain parts ...

htmlcssfrontendbootstrap-5

Tips for removing Blogger post snippet code from the template below:

Check out my blog at: . I have also posted the full Template code at https://pastebin.com/GXuPFKzH I want to display the full post on the homepage instead of just a snippet. Can you help me figure out which code needs to be removed? [insert image of the ...

javascripthtmlcsstemplatesblogger

Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't ...

cssreactjstailwind-css

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

htmlcss