Tips for positioning "THANK YOU" in the center

and this is a snippet of my coding

    <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" style= "font-family: 'Nanum Myeongjo', serif;">THANK YOU</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body textalert" style="font-family: 'Kanit', sans-serif;">
            Your product has been successfully reserved 
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>

Is there a way to center the text "THANK YOU"? I have attempted to use the align attribute, but it doesn't seem to be effective.

htmlcss

Answer №1

UPDATE: I have designed a container div to hold the modal. This allows for easy centering of the 'THANK YOU' text using the text-align: center; property. Additionally, I have implemented fit-content values to ensure the container can be moved and resized without impacting its contents.

<body>
    <div class="modal-container" style="width: fit-content; height: fit-content;">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel" style= "font-family: 'Nanum Myeongjo', serif;text-align: center;">THANK YOU</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body textalert" style="font-family: 'Kanit', sans-serif;">Your item has been successfully reserved.</div>
                <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</body>

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

Running a JavaScript function within a designated div element

I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...

javascriptjqueryhtml

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

Exploring the idea of merging the nested slider feature with a vertical thumbnail display. Reviewing the source code for examples image-gallery-with-vertical-thumbnail.source.html and nested-slider.source.html, I am wondering how to effectively combine t ...

javascripthtmljssor

Is it possible to superimpose a post-type title onto the featured image?

I have crafted this WP_Query to extract the titles and featured images from my post types. <div class="job-cont"> <?php $query = new WP_Query( array( 'post_type' => 'jobs' ) ); if ( $query->have_posts( ...

phpcsswordpressthumbnailstitle

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? https://i.sstatic.net/CQiVh.png (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution ...

cssreactjstypescriptreact-grid-layout

Issues with the Dropdown Menu

I'm currently working on a dropdown menu and I've encountered two issues. When I hover over the links in the main navigation bar (such as 'about' and 'connect'), only the actual words are clickable, not the entire area tha ...

htmlcssdrop-down-menu

What is the best way to create a shape using CSS?

In my chat application, I have a functionality where replies on a chat are initially hidden and represented by a count in a red box. When the user clicks on the red button, the replies from other users are revealed along with an input box for writing a r ...

htmlcss

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Does anyone know how to center the item I click in a carousel? I've searched high and low for a solution but couldn't find a clear answer. Can someone please assist me with this? This is what I have tried so far: http://jsfiddle.net/sp9Jv/ Here ...

javascriptjquerycsscarousel

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...

javascripthtmliframe

Saving JSON data into an HTML element using Handlebars templating

Is there a way to save the entire JSON object within an HTML element as a data attribute? let a = {name : "sample", age : "34"} $.find('#someDiv').data('adata', a); Is it possible to achieve the same result using Handlebars when creat ...

javascripthtmlhandlebars.js

Is it possible to center content with Bootstrap?

Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...

csstwitter-bootstrap

Guide to effectively invoking JavaScript functions using jQuery

<head> <script src="jquery-latest.js" /> <script> function resetValues(){ alert('Inside the resetValues function'); //using hexadecimal routine 1 -> 3 -> 5 -> 8 -> (11 == a) document.getElementB ...

javascriptjqueryhtmlweb

Wrapper Div at the Center

I'm currently working on aligning my webpage in the center using the following CSS: .wrapper { display: flex; align-items: stretch; background: #fafafa; /*max-width: 1520px; */ box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1); text ...

htmlcssflexbox

Upon including the enctype attribute as "multipart/form-data" in my form and submitting it, the form redirects to a different page

My website has two main pages: The first page is admin.php <?php session_start(); if (!isset($_GET['page'])){ $_GET['page'] = 'home'; }//end if include_once(dirname(__FILE__)."/function.php"); ?> <?ph ...

phphtmlmysql

The map fails to load on the HTML page

I am struggling to load a map into my HTML page from a file located in the app folder. Despite using the correct code for inserting the map, it still does not load properly. <!-- Contact section start --> <div id="contact" class="contact"> ...

javascriptjqueryhtmlgoogle-mapstwitter-bootstrap-3

Aligning enlarged text that spills over

Within my html/css application, I have defined a button as a class named .button with specific attributes. Here is a simplified example: .button { width: 120px; height: 30px; line-height: 30px; background: yellow; text-align: center; } <div ...

htmlcsscss-transforms

In Angular 4, the Bootstrap modal now only opens after a double click instead of opening on the first click

Working on an eCommerce application, there is a cart icon that triggers a modal screen displaying user-selected product data when clicked. However, the issue I'm facing is that upon initial page load, the modal screen opens only after double-clicking; ...

htmlangulartypescriptbootstrap-4

Elements in Bootstrap Container class failing to align properly

Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...

htmlcsstwitter-bootstrap

The collapsing menu is malfunctioning due to duplicate selectors

Although I have been learning HTML, CSS and jQuery, one area that always trips me up is selectors. Currently struggling with redundant selectors. I am attempting to customize the ul and li elements after collapsing the li, however, the selector doesn&apos ...

css

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

Is there a way to make FullPage and Lightbox compatible with each other?

Currently utilizing Fullpage.js for my website, I am looking to incorporate a lightbox in one of the sections. However, upon attempting to load the script and CSS, my fullpage layout breaks and the sections collapse. I have experimented with placing the ...

javascriptjquerycsslightboxfullpage.js