How to create a custom CSS style to make Bootstrap 4 modal slide in from the bottom

Back in the days of Bootstrap 3, this was the trick:

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

Another approach that could have been used:

.modal.fade .modal-dialog {
  transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
  transform: translate3d(0, 0, 0);
}

The real magic was in those modal classes with the transform property. However, in the realm of Bootstrap 4, things have changed. I'm currently working with Bootstrap v4.0.0-alpha.5. What adjustments do I need to make to achieve the same effect?

Check out the demo here - https://jsfiddle.net/qww47vfn/

csstransformbootstrap-4twitter-bootstrap-4

Answer №1

Discovered it, here is the CSS code to apply:

.modal.fade .modal-dialog {
    -webkit-transform: translate(0,25%);
    -ms-transform: translate(0,25%);
    -o-transform: translate(0,25%);
    transform: translate(0,25%);
}

I have made a change to the transform origin, switching from -25% to 25% (resulting in a fade-in effect from below). You can customize the value to adjust the initial fade-in position.

What is different?

Instead of using translate3d, the property translate is now utilized, meaning adjustments to the original values will not have an impact as the modal now recognizes the new properties.

Just a note:

If you try to implement this as a new rule, it may not work. I encountered this issue and solved it by modifying it within the DevTools. It seems like you have to override the initial code for it to take effect.

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

Ensure that FlexBox Columns have a height of 100% and vertically align their content

Having scoured through numerous questions and answers, I'm still stuck on why I can't achieve 100% height for certain flexbox columns. Specifically, trying to make the "Genre" column with one line of text match the height of the "Song & The A ...

cssflexbox

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

What is the process for incorporating a personalized SVG file into the material-ui Icon Component?

For my project, I have a requirement to use custom svg files. To achieve this, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0865697c6d7a616964257d61483b2631263b">[email protected]</a>. I reviewed ...

cssreactjssvgiconsmaterial-ui

Embed a unique custom design sheet within a Facebook iframe

I'm looking to customize the design of my Facebook feed by adding a custom style sheet inside a Facebook iframe. Here's what I have: <iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allo ...

jqueryhtmlcssfacebookiframe

What is the best way to conceal a sticky footer using another element?

I have a footer that remains fixed at the bottom of both long and short pages. Below is the CSS code for this footer: .footer{ position: absolute; bottom: 0; width: 100%; height: 100px; background-color: white; } My goal is to achieve a 'r ...

jqueryhtmlcssruby-on-rails

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Thank you for helping me out here. I'm currently working with ReactJS and facing a challenge where I need to change the background of a div from a color to a specific image URL upon clicking a button in a modal. Despite my efforts, I keep encountering ...

javascripthtmlcssreactjsbackground

Creating colorful containers using Bootstrap

Hey there, I am interested in creating small colored boxes to represent different meanings for each color. I came across this code snippet but I am unsure how to adjust the size: <div class="p-3 mb-2 bg-primary text-white">.bg-primary</d ...

htmlcssbootstrap-4

Issue with font-family not being applied in PHP code

Struggling to preview different fonts? The code below should work, however, the font doesn't seem to change. Check out the output: my Text - Arial.ttf - 1 my Text - Batman.ttf - 1 my Text - Verdana.ttf - 1 While the font is being detected, it& ...

phpcssfonts

Move the scss .map file to a separate directory within Intellij IDEA

I have a specific structure set up in my styles folder within the project directory. It includes three subfolders: css, scss, and css-maps. My goal is to automatically update a corresponding CSS file in the css folder and a .css.map file in the css-maps fo ...

cssintellij-ideasass

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

htmlcsswordpresscss-floatcustomization

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Just thinking about the best approach for Automation (such as Selenium). I've been advised against using IDs on elements, as it could result in JS errors (in case of duplicate IDs) and make CSS classes unique. While I see the point, not having IDs can ...

javascripthtmlcssautomation

Is it possible to incorporate both Bootstrap 3 and Bootstrap 4 within the same HTML file for separate div elements on a webpage? If so, what is the best way to achieve this?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Bootstrap 3 and Bootstrap 4 in the Same HTML File</title> </head> <body> <div class="bootstrap3"> Some code her ...

htmlcsstwitter-bootstrapbootstrap-4

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

cssiosjquery-mobileuiwebview

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

javascriptcssreactjssasscss-modules

Styling and theming in PrimeNG

Seeking advice on how to customize the appearance of the background for the primeNG panel component. I attempted to override the styling using the specific names in my scss file for the component, but it did not work. I also tried inline with <p-panel ...

cssangularprimeng

Issues with data within a Vue.js pagination component for Bootstrap tables

Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error: <table result="[object Object],[object Object],[object Ob ...

javascripthtmlcssvuejs2bootstrap-vue

What are the steps to create a dynamic navigation menu in Angular 2?

I have successfully implemented this design using vanilla CSS and JS, but I am encountering challenges when trying to replicate it in Angular 2. Setting aside routing concerns, here is the current state of my component: navbar.component.ts import { Comp ...

cssangulartypescript

Animating two elements on scroll at specific point with speed problem

Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already att ...

jquerycssanimation

reverting the effects of a javascript animation

I am expanding the size of a carousel on a specific pane by adjusting its height and position. Here is how I achieve this: if(currentPane==2) { $("#carousel").animate({height:320},1000); $("#carousel").animate({top:411},1000); $("#dropShadow") ...

javascriptjquerycsshtml

integrating the WordPress header into the WHMCS client portal

While working on a project, I am facing the challenge of aligning the WHMCS client area with my WordPress site. Progress has been made, but I have hit a roadblock. My goal is to integrate the header of my WordPress site into WHMCS. I initially attempted t ...

phpcsswordpresswhmcs