Troubleshooting the Alignment Problem in Bootstrap 4 Modals

My Bootstrap Modal suddenly stopped working and I can't seem to find a solution. I'm not using Bootbox or a beta version, so the usual fixes don't apply.

Here's what my problematic modal looks like: https://i.sstatic.net/JgI5Q.png

Modal code:

<div class="modal fade" id="successmodal" tabindex="-1" role="dialog" aria-labelledby="successmodalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="successmodalLabel">This is a title</h4>
      </div>
      <div class="modal-body">
        This is a message
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

I try to display it using jQuery with this CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

and this style CDN(?):

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
htmlcssbootstrap-4bootstrap-modal

Answer №1

Encountered a similar issue! Interestingly, it was resolved simply by swapping the positions of the button and title like so:

<h4 class="modal-title" id="successmodalLabel">This is a title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Answer №2

Have you ensured that all your content is added correctly?

I have successfully implemented the bootstrap modal. You can view the codepen example here: Codepen

<div class="modal" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary">Save changes</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

Make sure to include the following scripts:

<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer №3

There are multiple reasons why this issue may occur:

It could be due to CSS overrides affecting the modal, title, or close button. This can be resolved easily by:

<h4 class="modal-title pull-left" id="successmodalLabel">This is a title</h4>

If the issue persists, consider using the following CSS:

#successmodalLabel{
    display:inline;
    float:left;
}
or use
#successmodalLabel{
    display:inline;
    width:100%;
    text-align:left;
}

Answer №4

The positioning of your title to the right can be attributed to the CSS code added by Bootstrap:

.modal-header .close{
    margin: -1rem -1rem -1rem auto;
}

This code forces the close button to the right, which in turn places the title next to it in your specific case.

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

Using varied CSS styles for the index action in a Rails 5 application with Bootstrap 4 (within a single controller

I have customized my application with a unique bootstrap 4 template called cover.css. This template is specifically designed for the homepage, while all other pages will have a different style. Is there a way to apply cover.css only to the index action? ...

ruby-on-railsruby-on-rails-5bootstrap-4

Tips for monitoring password and password confirmation fields in DevTools when using AngularJS forms

Within the ng-model, I have identified two variables: vm.user.password and vm.confirmpassword. The input fields are equipped with attributes such as id, name, and class. I am interested in monitoring both the password and confirmpassword values within Dev ...

javascripthtmlangularjs

Unable to modify the formatting of this block within the forum (CSS)

I've been working on customizing a theme by changing the colors. While updating an IPB theme, I have successfully converted most of it from white to grey, except for one part. I've attached a Gyazo link with a sample post where the white color ...

cssipb

Utilize the filtering functionality in AngularJS to narrow down the search results

I have a table filled with data and I am trying to filter out any rows that have a datetime value that is not current (today's date) or alternatively, change the background color of those specific rows. I have attempted the following code but it is no ...

javascripthtmlangularjs

Can the presence of buttons and links improve mobile responsiveness?

I can't help but wonder about this. Is it user-friendly to create a div that looks like a button and has a 'click' event attached to it? Will all mobile browsers handle it accurately and always trigger the event when the div is clicked? In t ...

javascriptjqueryhtml

Utilizing the power of .not() to conceal all divs with the exception of the one that has been clicked on

I am currently working on a project to enlarge images that have thumbnails within divs. My issue is that when I click on an image with the .thumbnail class, it enlarges as expected but I want all other products to disappear from view. I attempted adding a ...

javascriptjqueryhtmlcss

The Bootstrap element's height and width properties are not functioning as expected

I created three bootstrap cards with images and descriptions underneath. To ensure uniformity in size, I included height and width attributes for the images. However, there seems to be a bug as the properties are not working correctly, resulting in the ima ...

htmlcss

Issues with Magento Shopping Cart upon using the browser's back button

I use a modified version of Magento 1.6.2 with significant customizations, particularly to the shopping cart template. Encountering an issue when users click the 'back' button in the browser after adding an item to the shopping cart. This proble ...

phphtmlmagentoe-commerce

Disappearing effect on hover outside of a Div

Let me explain the issue at hand. Currently, I have a layout like this: ----------------- | ------ | | |div1| | | ------ | |div2 | |---------------| In this setup, there is div1 placed within div2. Additionally, there is a ...

javascriptjquerycsshtml

Issue with data transfer in Angular 6 routes

I created an application that showcases a table of different cars: Here is my code snippet for the car component: Carcomponent.html <tbody> <tr *ngFor="let car of allCars; index as carId" \> <td [routerLink]="[&apos ...

javascripthtmlangulartypescriptroutes

Design a website logo that adjusts seamlessly to various screen resolutions

I'm in the process of developing a website (wesurf.co.il) and I've hit a snag with the logo placement. I want the logo to remain on the left side, next to the central menu. It looks fine on 1920x1080 resolution, but on other resolutions the logo ...

htmlcss

Get rid of the gap between two bootstrap columns

I recently started work on a blog-like React application and implemented the Bootstrap grid system. However, I have noticed a significant gap between my two columns. Is there a way to remove this extra spacing? Attached is a screenshot for reference. ...

cssreactjsbootstrap-4

Creating a dynamic feature in Javascript to toggle button text with the help of Bootstrap 4 and Font Awesome icons

I am currently utilizing Bootstrap 4 to design a button with a dropdown menu. The specific functionality I am aiming for is that the button, when closed, displays the word "open" along with a FontAwesome icon next to it. Upon opening, it should switch to d ...

javascripthtmljquerybootstrap-4

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

Deleting an List Item from an Unordered List using Angular

Within my MVC controller, I have an unordered list with a button on each item that allows the user to remove it from the list. The issue I'm facing is that while the row is deleted from the database, it still remains visible on the screen. This is ho ...

javascriptjqueryhtmlangularjs

font-family choice in web browsers

My current goal is to configure the browser to utilize the Quicksand font, which I am sourcing directly from a file located in the same directory. When I structure the code as shown below, the browser successfully implements the Quicksand font: @charset " ...

cssfont-family

How to handle users with disabled Javascript? Considering redirection to alternate sites for users with script disabled?

I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...

javascriptjqueryhtmlcss

Header logo not showing up on webpage

While working on a website template for a friend, I encountered an issue when uploading the site. The logo image was displaying perfectly fine on my local drive, but once uploaded, it showed as a broken image icon on the live website. Here is the code sni ...

htmlcssweb

Issue with displaying drop down menu for selecting number of items per page in BootstrapTable2 pagination

I've implemented BootstrapTable2 with Bootstrap4, and everything seems to be working fine except for one issue - when I try to select the number of items per page, the drop-down menu doesn't appear as expected. Below is the code snippet based on ...

reactjsbootstrap-4react-bootstrapreact-bootstrap-table

Tips for adjusting an @media css for a material-ui react component

After posting this inquiry about overriding a CSS property in a material-ui component, I received a helpful example. However, I encountered difficulty when attempting to set the height of the Toolbar component due to an overarching @media specification. My ...

cssreactjsmaterial-ui