Bootstrap does not control the text family, weight, and line height

Currently, I am practicing adding grid layouts using Bootstrap. I have been trying to change the font styling within my project, but unfortunately, none of the changes seem to be taking effect. It's quite frustrating because even though I'm following the exact steps shown by my teacher, I am unable to alter the font style, line height, or text weight.

Can anyone offer some guidance or advice on how to solve this issue?

https://i.stack.imgur.com/EWbus.png https://i.stack.imgur.com/ecvMZ.png

body {
  font-family: 'Montserrat', sans-serif;
  font-family: 'Ubuntu', sans-serif;}

css
#title{background-color: #ff4c68;

}

h1{
  font-family: "Montserrat-black";
  font-size: 3rem;
    line-height: 1.5;
  }
  <div class="row">

    <div class="col-lg-6">
      <h1>Discover new and fascinating canines in your area.</h1>
      <button type="button">Download</button>
      <button type="button">Download</button>
      </div>

    <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
  </div>

htmlcssbootstrap-4

Answer №1

To utilize the font known as Montserrat, you will need to insert the following code snippet from Google Fonts into your website's <head> section before referencing any stylesheets that use this font:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">

The sequence of actions should be as follows:

  1. Include the two <link> tags mentioned above first,
  2. Follow with the <link> for the bootstrap.css file in second place,
  3. Lastly, add the <link> to your css file(s) at the end.

Answer №2

Looks like Bootstrap styling is taking precedence over your CSS code.

To prevent this, consider placing your CSS code below the Bootstrap link:

<link href="bootstrap.css" rel="stylesheet">
<link href="yourstyles.css" rel="stylesheet">

Answer №3

If you encounter an issue where bootstrap is overriding its own code, one solution is to use !important in your CSS or insert a style tag directly into your HTML file for styling. Additionally, if you are experiencing font display problems, make sure to include links to the necessary fonts, which can easily be found on Google Fonts. It's important to note that these two methods should not be used simultaneously as they are distinct approaches. Ultimately, relying too heavily on !important is not considered best practice.

Answer №4

Based on the logic, my custom styles are unable to override the bootstrap styles. To fix this issue, it is essential to rearrange the order by placing the link to your custom stylesheet after the bootstrap CDN link:

This approach ensures that the default bootstrap styles load first, followed by the opportunity to customize specific components with personalized CSS.

In the realm of HTML, code execution happens sequentially from top to bottom, emphasizing the significance of code arrangement.

P.S: While using !important can be effective, it is not advisable in the current context.

#title{background-color: #ff4c68;

}

h1{font-family: "Montserrat";
font-weight: 700;
font-size: 3rem;
line-height: 1.5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
  
  </head>

<body>

  <section id="title">
  
  <div class="row">

    <div class="col-lg-6">
      <h1>Meet new and interesting dogs nearby.</h1>
      <button type="button">Download</button>
      <button type="button">Download</button>
      </div>

    <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
  </div>
  
  </body>
</html>

https://i.stack.imgur.com/vy7l4.png

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

Elements appear with varying widths in Firefox compared to Webkit-based browsers

I believe it would be simpler for you to inspect the elements rather than me writing the code, so I have provided a link: music band site. Now onto the issue: When the window width is reduced in Firefox, you will notice that the social icons in the yellow ...

htmlgoogle-chromefirefoxcss

Is there a way to display a list of dropdown menu options using Selenium with Python?

I am currently attempting to utilize Selenium Python and its PhantomJS function in order to print out all the items from the first drop-down menu on this particular page (). Unfortunately, I keep encountering a No Attribute error message. If anyone could ...

pythonhtmlseleniumselenium-webdriverweb-crawler

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

Displaying three tables in each row using ng-repeat, with the ability to repeat the process multiple times

Is it possible to repeat a table multiple times with each set of three tables in the same line using AngularJS and Bootstrap? I am unsure how this can be achieved with ng-repeat. table 1 | table 2 | table 3 table 4 | table 5 | ... <div ng-repeat="zo ...

htmlangularjsbootstrap-4

I wish to substitute a form field with a different one once the value of another field matches a specific condition

The issue I'm facing is that the field disappears once "US" is chosen and does not revert back to the options when another choice is made. teacher_signup.html {% block content %} <h2>Sign Up As Teacher</h2> <form method="post> ...

javascriptjqueryhtmldjangoforms

When the mouse is clicked, the character fails to reach the intended destination or moves in the wrong direction on the HTML canvas

UPDATE: RESOLVED I am currently working on a game where the character moves by right-clicking. The character is meant to walk slowly, not teleport, towards the destination set by right-clicking on the canvas. However, I have encountered an issue where the ...

javascripthtmlhtml5-canvas

Interaction between index file and module instance

As I develop a computer system, I have divided it into various smaller components. My experience in software development has taught me the value of keeping systems compact and focused. To achieve this, I am creating modules that perform specific function ...

javascripthtmleventsdom-eventsmodularity

Retrieving AJAX data in a Node.js environment

In my HTML application, I am utilizing AJAX to showcase the output on the same page after the submit button is clicked. Before submitting, I am able to retrieve the values passed in the HTML form using: app.use(express.bodyParser()); var reqBody = r ...

javascripthtmlajaxnode.js

Trouble with z-index | initial div out of four malfunctioning

Currently, I am attempting to practice by replicating the design shown in this image: However, I have encountered an issue that has been persisting for some time: I'm struggling to understand why this issue is occurring. An interesting observation i ...

htmlcsstwitter-bootstrapz-index

Modifying CSS styles in JavaScript based on the user's browser restrictions

My CSS style looks like this: button.gradient { background: -moz-linear-gradient(top, #00ff00 0%, #009900 50%, #00dd00); background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), color-stop(0.50, #009900), to(#00dd00) ...

javascripthtmlcss

Adding an external JavaScript file to an HTML document by importing an array

Having trouble loading an array from an external JS file into my HTML. Snippet from js.js: var temp_max = [4,9,2,5,8,4,2,10]; In the HTML: Note: Be sure to download DateJS and place it in "DATE-JS"!! <!doctype html> <html> ... (HTML c ...

javascripthtmlarrays

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

htmlcss

Looking for a way to upload only part of a large file using HTML and PHP

Is it possible to create a PHP script that can upload only the first 1 MB of a very large file? Can this be achieved with a standard form upload in PHP by closing off the connection after 1 MB is uploaded? I have researched various uploaders (HTML5/Java ...

phpjavascripthtml

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

Tips for dynamically resizing a div element as a user scrolls, allowing it to expand and contract based on

I was working on a project and everything seemed easy until I hit a roadblock. What I am trying to achieve is expanding a div to 100% when scrolling down to the bottom of the div, then shrink it back to 90% at the bottom and do the reverse when scrolling ...

javascriptcssreactjssassnext.js

There are additional elements that can be toggled, but I prefer to only toggle the one that I have selected

Every time I click on a table a, intending to toggle the .info inside the same div, it also toggles the .info in other divs. Can someone provide assistance with this issue? function info() { $('.table a').click(function() { $('.info ...

javascriptjqueryhtmlclicktoggle

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred

Dynamic styling with jQuery input focus animation

Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges. Here is how I've set it up: HTML <input type="text" id="search-input" placeholder=&quo ...

jquerycss

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

I've been following a tutorial on using ng-Table, which can be found Here. When I download the example from Git, it loads without any issues. However, when I try to replicate even the simplest example myself, the column headers and filters load but th ...

javascripthtmlangularjsangularjs-ng-repeatngtable

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

htmlcss