Adding three components to the header of Bootstrap's modal: A quick guide

I would like my modal to contain three elements: On the left: a button In the center: a title On the right: a close button

At first glance, it may appear that I have achieved this layout, but in reality, my title is not properly centered. Here's the code snippet:

.modal-dialog {
  max-width: 90%;
}

.modal-header {
  border: none;
}

.modal-title-filter {
  color: #2D2D2D;
  font-size: 1.2em;
  text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


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

htmlcssbootstrap-4

Answer №1

The main heading is aligned in the center, relative to its container h5 and not the modal-header. However, if you prefer the title to be centered with respect to the modal-header, you can adjust the margin-left of your title accordingly. Here is a sample code snippet to achieve this:

.modal-header .modal-title{
  margin-left: -30px;
}

By increasing the negative value, you can further shift the title to the left or align it more centrally based on your preference.

I trust that this information has been helpful to you. Best regards!

Answer №2

To achieve a layout like this, you can utilize the flex display property for the modal header and align the content using space between the items.

Note: In order to override the margin left auto declaration on the close button, I had to add the style margin-left: 0.

.modal-dialog {
  max-width: 90%;
}

.modal-header {
  border: none;
}

.modal-title-filter {
  color: #2D2D2D;
  font-size: 1.2em;
  text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Header -->
<div class="modal-header d-flex justify-content-between align-items-center">
  <button class="btn btn-primary">Limpiar filtros</button>
  <h5 class="modal-title modal-title-filter" id="exampleModalLabel">Filtros</h5>
  <button type="button" class="close" style="margin-left: 0;" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
</div>
<!-- /Header -->

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

Error Alert: It is required that only variables are passed by reference in the file located at /home/indiamaz/public_html/musicwala.cf/get-zip.php on line 31

A few days ago, my PHP project was running smoothly without any errors. However, for the past two days, I have been encountering a Strict Standards error and a Warning message in my code. I'm unsure of what caused this sudden issue and would appreciat ...

phphtml

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

javascriptcssreactjsstylesjsx

color settings on a search icon as a background

I'm struggling to make the background color of my search glyph fill the entire box. I want it to resemble this image. However, at the moment, it looks more like this. I can't figure out what's causing the issue. Below is the HTML code I&a ...

htmlcsssearchbootstrap-4

Manipulating the location where a dropdown menu intersects with a button

Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...

htmlcss

How can you identify when an input value has been modified in Angular?

For my current project, I am developing a directive to be used with a text input field in order to format currency input. This directive has two HostListeners - one for when the input loses focus and one for when it gains focus. When the blur event occurs, ...

javascripthtmlangularangular2-directives

Replacing the CSS Reset with the Universal Selector

I implemented Eric Meyer's Reset to set the font, and then loaded my stylesheet to globally set the font using the universal selector. Even though I loaded the universal selector in my SASS after the reset, the reset is still taking precedence. (Atta ...

csscss-selectorscss-reset

Exploring the fundamentals of Python through beautiful soup parsing

Assuming I use: date = r.find('abbr') To retrieve: <abbr class="dtstart" title="2012-11-16T00:00:00-05:00">November 16, 2012</abbr> I simply aim to display November 16, 2012. However, when attempting: print date. ...

pythonhtmlbeautifulsoup

Are Css3 Transition and Transform properties dysfunctional in older versions of IE?

Snippet of HTML Code: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/demo.css" /> </head> <body> <div></div> </body> </html> CSS Snippet: div { width: 100p ...

javascriptjqueryhtmlcss

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

javascripthtmlnode.jspush-notificationvert.x

What does Event.target.id return - the HTML id value or the HTML name value?

HTML Form Example: <form id="form-product-add" style="display: inline;"> <input name="csrf" type="hidden" value="<?= $this->csrf; ?>"> <input type="hidden" name="a ...

javascriptphphtmleventstarget

Stop iOS Safari from automatically capitalizing the initial letter in input fields

My web app has a username field that is case sensitive. Everything works smoothly in most cases, but there seems to be an issue with Safari on iOS and occasionally Chrome on Android. These browsers automatically capitalize the first letter of any text ente ...

htmlcssmobile-safarimobile-chrome

The various options in the dropdown menu are descending in order

I am currently facing an issue with a dropdown menu that contains the list of products offered by our company. Specifically, one of the product names, Hotel Management Solutions, is appearing on multiple lines instead of a single line in the dropdown menu. ...

htmlcss

Control other inputs according to the chosen option

Here is the HTML code snippet: <fieldset> <label for="tipoPre">Select prize type:</label> <select id="tipoPre"><option value="Consumer Refund">Consumer Refund</option> <option value="Accumulated Prize Ref ...

javascriptjqueryhtml

Is there a way to position the menu above the button?

I need some help with my menu. Currently, it is showing up below the button and within my footer instead of above the content like I want it to. If anyone can assist me in understanding what I am doing wrong, I would greatly appreciate it. Thank you for ta ...

javascripthtmlcssmenusettings

Ways to calculate the product of two numbers using AngularJS within an HTML document

I am currently experimenting with AngularJS to create a unit conversion tool. I have set up two dropdown menus with unit values and would like to calculate the product of the selected values from the dropdowns. I have created a jsfiddle with my code, and I ...

javascripthtmlangularjs

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...

cssreactjsnext.jsrollup

Utilizing Radio buttons to Align Labels in Bootstrap 4

I'm experimenting with a Bootstrap 4 form and trying to get inline radio buttons with labels. It was working fine with Bootstrap 3, but I'm facing issues with Bootstrap 4 and its custom-radio styling. Desired Output: Gender : ( ) Male ( ) Female ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Engaging with JSON data inputs

Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...

javascripthtmljson

What is the best way to incorporate an opaque overlay onto an image along with text overlay on top of the image?

I'm struggling to overlay an opaque layer above an image with responsive text on top of it. I want the opaque layer to be positioned above the image but below the text, and not appear when hovering over the image. You can view my test page here: I a ...

htmlcss

What is the process for applying the source from an object while utilizing video-js?

I've been struggling to use a video player for streaming m3u8 videos. The code below works, but I want to dynamically set the source using an object. <video id="my-video" class="video-js" auto ...

javascripthtmlvideo.js