What is the best way to divide a Modal Header column into two separate sections?

Is there a way to center the text in the Modal Header and have the H1 and P tags occupy one row each?

Applying d-block to each creates two columns. I also tried increasing the Height in the Modal Header without success.

If you have a solution, please help! My email is: [email protected].

<div class="modal fade" id="product-review-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
                <p>Please review this product! Thank you for your cooperation!</p>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
htmlcssbootstrap-5

Answer №1

It is important to note that .modal-header has a default CSS property of display: flex (this can be verified by inspecting the code), causing the children elements to align next to each other.

To override this default behavior, you can apply any of the following classes to the modal-header element:

  1. Adding flex-column will change the direction of the flex layout to a column.
  2. Adding d-block will switch the display property of modal-header to display: block.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b766b737573">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141342f322f32">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<!-- with .flex-column -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#product-review-modal">
  flex-column
</button>
  <div class="modal fade" id="product-review-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header flex-column">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
          <p>Please review this product! Thank you for your cooperation!</p>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

<!-- with .d-block -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#product-review-modal2">
  d-block
</button>
  <div class="modal fade" id="product-review-modal2">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header d-block">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
          <p>Please review this product! Thank you for your cooperation!</p>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Keep in mind that using .flex-column will automatically center the text because modal-header also has align-items: center; defined.

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

Utilize visuals to select premade designs

I am looking to enhance the user experience in selecting templates on Wordpress by integrating images for a visual preview. Instead of a traditional text-based dropdown menu, users would be able to see what the template looks like before choosing it. EDIT ...

htmlcsswordpress

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

htmlcssreactjscss-modules

What is the best way to attach an image to the image section coming from the backend in vue.js?

I have developed a frontend page that displays a list of books, with the data coming from the backend. The backend response includes image files, and I am struggling to bind these images to the image section of my template. I have the image paths from the ...

htmlcssvue.jssass

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

Encountering [Object Object] within an angular2 app

https://i.stack.imgur.com/iceKH.pngI recently created an angular2 application using ngrx/effects for handling http calls. My reference point was an application on GitHub. However, I am facing an issue where the response from the HTTP call is not displaying ...

htmlangularrestngrx-effects

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

javascriptjqueryhtmlcss

Error encountered: string literal not closed while attempting to load text using ajax

It appears that many programmers from various languages have encountered this issue. I am using jQuery to fetch AJAX text onto a screen, but firebug is indicating an unterminated string literal with an unhelpful example : $("#content").html("<div cla ...

jqueryhtmlruby-on-railsajaxdynamic

Check the radio box corresponding to the adjacent label

As a hobby, I have been exploring ways to automate questionnaires that I used to manually deal with for years. It has always intrigued me how best to streamline this process, and now I am taking the opportunity to indulge in my passion and enhance my JavaS ...

javascripthtmlautomationradio-button

CSS switch status toggle

Here's my code for a toggle switch from . I'm trying to change the label before the switch/checkbox to display "checked" or "not checked" based on the toggle state. When I click on the label, it changes the switch but not the text. JavaScript: ...

javascriptjqueryhtmlcss

What could be causing jQuery to overlook the content within my div element?

I have a basic toggle feature for a div connected to a checkbox. $('#step2').hide(); $('#toggle-check').click(function(){ $('#step2').fadeToggle(); }) Why is .hide() not working to hide the contents of #step2? The content ...

jquerycsstoggle

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a se ...

htmlcss

Looking for the location of a matching brace in a dataset?

As a newbie in the world of coding, I have embarked on learning about NodeJs file system module. Currently, my focus is on handling a large data file stored as a string. The challenge that I am facing is with locating the matching close brace and its pos ...

javascripthtmlnode.jsangularjs

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

javascripthtmlknockout.jslambdatypescript

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

Create a bookmark system on an HTML page by utilizing the existing heading tags and implementing Javascript

Looking to implement a bookmark system using the headings within my HTML document, based on heading hierarchy. Unfortunately, my attempts have not been successful so far. https://i.stack.imgur.com/CdXjw.png I envision my bookmarks looking something like t ...

javascripthtmlcss

The Laravel status check button consistently displays a value of 0 and does not update in the database

Hello, I have encountered an issue with my adminController. Despite checking the status box, it is being saved as zero in the database. I am unable to understand why the if/else block is not functioning properly. Even when I use debug, I can see that the c ...

phphtmlmysqllaravelif-statement

Styling Process Steps in CSS

Just starting out with CSS! I'm looking to replicate the Process Step design shown in the image. https://i.stack.imgur.com/Cq0jY.png Here's the code I've experimented with so far: .inline-div{ padding: 1rem; border: 0.04rem gray ...

javascripthtmlcss

JavaScript allows for selecting individual IDs by their corresponding numbers

Looking to retrieve numerical IDs <div class="user-view"> <div class="show_user_div"> <div class="disp"> <a href="/profile/name1/">name1</a><br /> <span id="show_a_3"> <a id="ref_show(3)">Show Details</ ...

javascripthtmljquery

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

Using the flexslider to override CSS styles in an <li> element

I have implemented the flexslider by whoothemes on my responsive website to showcase tiles. However, I am facing an issue with setting a specific width for the tiles on various devices. Upon inspecting with Chrome, I see this code: <li style="width: 21 ...

jquerycssstyleshtml-listsflexslider