H4 Heading in CSS/Bootstrap not aligning centrally

Having some trouble centering a <h4> title within a bootstrap modal. Here is the code snippet:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document" style="
    margin-top: 40px">

    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title text-center">Request to be Called Back</h4>
      </div>

      <div class="modal-body">
       [body.....]      
      </div>

    </div>

  </div>

</div>

It seems to work fine when tested on JSFiddle, but not within my actual project! I suspect there may be a conflict with the WordPress theme I am using, causing issues with Bootstrap, although I am not entirely certain.

cssbootstrap-4

Answer №1

apply the justify-content-center class to the modal-header

.modal  {
 display: block !important; // only for demo
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document" style="
    margin-top: 40px">

    <div class="modal-content">

      <div class="modal-header justify-content-center">
        <h4 class="modal-title text-center">Request a Call Back</h4>
      </div>

      <div class="modal-body">
       [body.....]      
      </div>

    </div>

  </div>

</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

Is it possible to create rounded or curved top corners for a box using HTML?

I'm looking to create a card with rounded top corners and wondering if there is a way to achieve this. Currently, here is the code I have: <div id="card1"> <div id="card1i"></div> </div& ...

htmlcss

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

Creating an arrow icon alongside a pseudo:hover::before element

This is my custom code snippet: .privacycheck1 { position: relative; top: 265px; background-color: #CF0000; width: 24px; height: 24px; left: 843px; border-radius: 50px; border: 5px #E60000; } .privacycheck1::before { position: relative ...

htmlcsscss-shapes

React component utilizes Material UI to detect scrolling within a table

Currently, my table's body size is set to fixed dimensions in accordance with Material UI guidelines. I am looking to implement a functionality that allows me to dynamically load more rows as the user scrolls through the table. Can you recommend the ...

javascripthtmlcssreactjsmaterial-ui

Steps for modifying the CSS style of a div element following an onclick event:

<html> <head> <style type="text/css"> .step_box { border: 1.0px solid rgb(204, 204, 204); border-radius: 10.0px 10.0px 10.0px 10.0px; } .step_box:hover{ background: rgb(184, 225, 252); } .selected { background-color : #fff000; ...

javascriptjqueryhtmlcss

Enhancing Title and Meta Tags with Decorative Styles

Looking to style the <title><p>AAA</p></title> and <meta name="decrition" content="AAA">. But when I added <p> and applied CSS with: p{color:red;size:1000px} The title is being displayed as <p>AAA</p> Any ...

htmlcsstitle

Reducing the size of the website does not necessarily mean the body will be at 100% width

While inspecting the site, I noticed that the body does not extend to 100% width of the screen when I reduce the size of the site. After removing the Bootstrap classes, the issue seems to be resolved. I even tried adding body{width: 100%} but it did not h ...

htmlcssbootstrap-5

Center-align the text within the dropdown menu

Here is the HTML code snippet I am working on: <select id="ddlCountry" placeholder="optional" class="select" title="Select Country"> <option value="0">country</option> </select> This is how the CSS is set up: .select { width ...

htmlcsshtml-select

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

htmlcss

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

htmlcss

Side Menu with Fixed Position Created with Tailwind CSS

Can anyone help me create a social media sidebar that stays fixed on the bottom right side of the screen, regardless of its size? Currently, the sidebar moves when I scroll down, but I want it to remain in place. How can I achieve this fixed positioning? ...

htmlcsstailwind-css

Adjust image size with react - personalize styling for react-easy-crop

I am currently working on developing a basic react component that involves cropping images using react-easy-crop. It seems like the style of the react-easy-crop module can be customized with the style prop, which consists of three objects: containerStyle, ...

cssreactjscrop

HTML5 header video with a subtle color palette

Is there a way to insert a muted video in the header that spans the full width but only has a height of 300px? The issue I am encountering is that when I decrease the height of the video, the width automatically decreases as well. However, what I want is ...

csshtmlbootstrap-4

Bootstrap requires Visual Studio Code live-server plugin to function properly

I have been utilizing the Visual Studio Code IDE for my coding projects, along with a helpful plugin called "live server" that allows for quick checks of code changes. Everything was running smoothly with Bootstrap until I encountered an issue. When I att ...

htmlcssidevisual-studio-codebootstrap-4

Why must the sidebar be displayed horizontally on the smartphone screen?

I've been struggling to make the sidebar menu on my smartphone display horizontally with icons at the top and text at the bottom. I've tried using flex and other methods, but it still doesn't work sideways. Am I missing something? const s ...

javascripthtmlcssbootstrap-5

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature ...

htmlcsscss-transitions

Leveraging the power of Bootstrap 4 in combination with Vaadin 14

When trying to use Bootstrap styles, I attempted to include them in MainView using @StyleSheet with a URL provided, @StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css") or as @CssImport referencing a local copy, @CssIm ...

bootstrap-4vaadin

Smoothly transition the box shadow using CSS3's ease-in and ease-out effect

Struggling to achieve a smooth easing effect for a box shadow transition using CSS3. This is the current CSS code in use: #how-to-content-wrap-first:hover { -moz-box-shadow: 0px 0px 5px #1e1e1e; -webkit-box-shadow: 0px 0px 5px #1e1e1e; box-s ...

csshovercss-transitions