What is the best way to adjust the font weight of a Bootstrap 4 modal header?

Is there a way to adjust the font weight in the header of a Bootstrap 4 modal?

As an added challenge, I'm also interested in changing the font color to #7f7f7f...

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Any suggestions would be greatly appreciated! Sean

cssbootstrap-4bootstrap-modal

Answer №1

To enhance the header of a modal, you can add a CSS selector to either the modal-title or modal-header with properties such as color, font-size, and font-weight.

.modal-title {
  font-size: 60px;
  color: #7f7f7f;
  font-weight: bolder;
}
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </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

Creating slanted lines using CSS / Bootstrap 3

I'm trying to create a webpage with slanted lines. Is it possible to set an angle of 20 degrees using three div elements? Currently, I have one div for the logo at the center and another for the navigation bar. I want the navigation bar to align with ...

htmlcsstwitter-bootstrap-3

I've been working on a script in JavaScript to retrieve lectures for a specific day, but I'm having trouble connecting my jQuery code to it

Exploring a JavaScript function that retrieves today's lectures for a specific section of a class using jQuery. The challenge lies in implementing this array of classes on an HTML file. //function to get today var today = new Date(); var dd = today ...

javascriptjqueryhtmlbootstrap-4

The difference in percentage padding rendering is specific to Firefox only

In my current project, I have created various responsive boxes for displaying news articles on the website. Everything seems to be functioning well except for the news items within the slider at the top of the main content. Surprisingly, they are displayin ...

htmlcssfirefoxpaddingpercentage

Selecting menu items in React Material UI with various background colors using the RAL color selector component

Seeking a solution to create a component for selecting RAL colors using Material UI's TextField and MenuItem. Each item in the menu should have a background color reflecting the RAL color it represents. However, Material UI no longer supports inline s ...

cssreactjsmaterial-ui

Looking to organize left, right, and center columns in a vertical stack with reactstrap specifically for the md breakpoint - how can I achieve this?

Utilizing reactstrap to enhance the appearance of my three-column webpage <Row> <Col md="4">Left</Col> <Col md="9">Center</Col> <Col md="5">Right</Col> </Row> This is the layout I am aiming for ...

reactjsbootstrap-4react-bootstrapreactstrap

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

Is it possible for me to interact with different elements upon hovering?

html, <div id="first"> <a>Click here</a> </div> <div id=second"> second div content </div> css, #first a:hover{ color:blue; /*change color on hover */ #second{ background:blue; } } In ...

javascriptjqueryhtmlcss

IE z-index anomaly

My line of floated divs reveals a popup when hovered over, but the popup appears under the following divs instead of on top. I've tried using z-index with no success to fix this issue. UPDATE: The problem has been resolved with some assistance, but i ...

jquerycssz-index

How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...

htmlcsswordpress

I seem to be having an issue here - my style sheet just won't load

I am having an issue with my external style sheet named style.css. style.css #topbar { background-color: red; width: 1000px; height: 40px; } body{ background-color: green; } I have tried calling this style.css from the root folder, but it's not ...

htmlcss

Positioning a pair of dropdown menus side by side

Could anyone provide guidance on how to position two select boxes side by side within a table cell, ensuring they are responsive at the same time? Any help would be greatly appreciated. Thank you in advance! ...

htmlcss

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color

Incorporate a hanging indent within the text enclosed by the <li> element

(revised multiple times to enhance clarity) Disclaimer: I did not create the HTML code. Below is the structure of the HTML (please note that the links and text following them are on the same line): <li> <strong>Heading of section</str ...

javascriptjqueryhtmlcsstext-indent

Achieving a 100% width input with Flexbox: Tips and tricks for success

Check out this flexbox form I created using bootstrap 4: https://jsfiddle.net/kkt0k2bs/1/ I have implemented a media query to adjust the form elements for smaller screens. For larger displays, I want the form items to be displayed inline. However, on sm ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

What steps do I need to take to transform this HTML snippet into a Bootstrap design

Looking to convert the table below into bootstrap rows and columns. I'm not very familiar with bootstrap, but would like to give it a try. Any guidance on where to start would be greatly appreciated. Thank you for your help! <div id="section1"> ...

htmlcssbootstrap-4

Changing the color of a menu item in Bootstrap when a modal window is closed: A guide

I am implementing Twitter Bootstrap and attempting to launch a modal popup by clicking on a menu item. Below is the code snippet: <div class="navbar navbar-fixed-bottom"> <div class="navbar-inner"> <ul class="nav pull-right"> ...

javascriptcsstwitter-bootstrap

Automatic Opening and Closing of Bootstrap Modal

function toggleModals(hideModal, showModal) { console.log(hideModal); console.log(showModal); $(hideModal).modal('hide').on('hidden.bs.modal',function () { $(showModal).modal('show' ...

jquerytwitter-bootstrap-3bootstrap-modal

Stylish date picker in CSS

Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below. For example, when selecting numbers 48-49-50, t ...

jquerycss

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...

jquerycssnpmwebpackcreate-react-app

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5