Centralize Content in Bootstrap 4 Modal

Could someone help me with centering the title horizontally in a Bootstrap 4 modal?

I've attempted using text-center, mx-auto, and ml-0 / mr-0 but none of them seem to work.

Here is a link to a fiddle for reference.

Please find the code snippet below;

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When working with the modal-header, which is set to display:flex, centering its content (such as the modal-title) can be a bit tricky. Using mx-auto may not provide an exact center due to the close button's position.

An alternative approach is to change the header to display:block (d-block) and utilize text-center.

Check out this example on jsFiddle

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header d-block">
        <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title text-center" id="exampleModalLabel">Modal title</h5>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Another option is to add w-100 to the modal-title for full width and then use text-center.

<div class="modal-header">
     <h5 class="modal-title w-100 text-center" id="exampleModalLabel">Modal title</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
     </button>
</div>

View this alternate solution on jsFiddle

Answer №2

Adding text-center d-block to the header and d-inline-block to the title fixed the issue.

The problem stemmed from the header being flex with justify-content space-between, causing the title to be pushed to the left.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center d-block">
        <h5 class="modal-title d-inline-block" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Check out this Example on Bootply

Answer №3

To style the title of a modal, you can simply add CSS to the modal-title class like this:

.modal-title {
    text-align: center;
    width: 100%;
}

Here is an example link that demonstrates this: https://jsfiddle.net/abc123/

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

"Unlocking the potential of AngularJS: A guide to accessing multiple controllers

I am trying to set a variable in one instance of a controller and read it in another. The variable I need to set is within the object vm (so $scope cannot be used). This is the code for the controller: app.controller("AppController", function(){ var ...

javascriptangularjshtml

Issue with JQuery functionality when included in a separate .js file

My JQuery code is causing me some trouble. Interestingly, when I embed this code within script tags directly in my HTML file, everything works fine. But as soon as I try to place it in a separate JavaScript file, it simply refuses to work. And no, the iss ...

javascriptjqueryhtml

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

What is the best way to create a transparent popup using only CSS?

https://i.sstatic.net/gNLMM.png Creating a pure CSS design using background properties. body{ background: linear-gradient(to left bottom, blue, red) no-repeat; width: 100%; height: 300px; } .content{ position: relative; } ...

htmlcsssvg

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...

javascriptjqueryhtmlfirefox

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

cssreactjsmaterial-ui

Use jQuery to manipulate HTML elements

I want to dynamically change text in a div using jQuery when clicked. Here is an example: $(document).ready(function() { $("#hideall").click(function() { $("#hideall").html("<p>SHOW</p>"); }); }); The HTML code for this is: <div id="hidea ...

jqueryhtmlclick

Insert HTML code following every second div element

I have been struggling to find a solution using js or php for my issue: I have multiple div elements, and I need to insert additional HTML after every two divs. Here's an example: <div> Some content </div> <div> Some other c ...

phpjqueryhtml

The Scrapy CSS selector is not fetching any prices from the list

Having trouble with the price CSS-selector while scraping an interactive website using Scrapy. Check out the HTML screenshot I captured: https://i.stack.imgur.com/oxULz.png Here are a few selectors that I've already experimented with: price = respon ...

pythoncssweb-scrapingscrapycss-selectors

The Bootstrap 4 dropdown feature is not functioning properly in Angular's production environment

While developing my Angular application with Bootstrap 4, I encountered an issue with the dropdown functionality. In the development mode, everything works perfectly. However, in production mode, I received the following error: Uncaught Error: DROPDOWN: ...

htmlangularbootstrap-4angular8

IE not sending variable to the server

I have a webpage where I am using checkboxes and I want to retrieve the values of the checked ones using PHP. Below is the code snippet: <input id=checkBoxChrome form="saveform" type="checkbox" name="checkbox[]" value="Chrome" checked > And here i ...

phphtmllaravelinternet-explorercross-browser

"Using CSS to align content in a table-row format on an HTML display

I'm struggling to align two components using the <div display='table-cell'> method. The first component is showing a gap at the top which I want to remove in order to have them aligned perfectly. Check out the JsFiddle example here: h ...

htmlcsstwitter-bootstrap

"Looking to make a div disappear smoothly once a button inside of it is clicked? Learn how to fade out

In my project, I aim to create multiple div elements, each containing its own button element. The goal is to have the div fade out slowly when the respective button is clicked. To experiment with this concept, I started by passing the parent of the button ...

javascripthtml

Dropzone JavaScript returns an 'undefined' error when attempting to add an 'error event'

When using Dropzone, there is a limit of 2 files that can be uploaded at once (maxFiles: 2). If the user attempts to drag and drop a third file into the Dropzone area, an error will be triggered. myDropzone.on("maxfilesexceeded", function(file){ a ...

javascriptphphtmldropzone.js

Tips on sorting out an additional tier of the grid

Looking to customize the grid layout similar to this example: https://getbootstrap.com/docs/5.0/layout/grid/#customizing-the-grid Specifically, I want to include a new grid option (xxs). I have created a custom.css file with the following code: $grid-br ...

twitter-bootstrapbootstrap-5

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

javascripthtmlangularjsangularjs-scope

Webpack doesn't seem to be able to display custom fonts

I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...

javascriptcsswebpackfonts

To view the following set of three images, simply click on the "load more" button

I'm looking to add a load more button to reveal additional images. Currently, the page loads with 3 images visible, and upon clicking the load more button, the next set of 3 images should be displayed on the screen. Unfortunately, the code I've ...

javascriptjqueryhtmlcss

jQuery allows you to dynamically add a link that can remove a control in a unique

I am facing an issue with generating controls and removing them dynamically. I am trying to include a 'Link' that will trigger a function to remove the dynamically created control. The control and link are placed next to each other. Below is the ...

javascriptjqueryhtml

Utilize Bootstrap 4's d-print classes to style your form

After creating a form that allows users to submit online or print and mail, I encountered an issue with the printing functionality. When using a simple JavaScript print command and applying the .d-print-none class to hide all elements except the form for p ...

cssbootstrap-4