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

Insert the current row into the table

I'm working with an HTML table structure that looks like this: <table id="test"> <thead> <tr> <td></td> <td></td> <td></td> <td></td> ...

jqueryhtml

Struggling to align elements in a navbar using HTML and CSS?

Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facin ...

htmlcss

Utilizing Javascript / jQuery to eliminate specific CSS styles

I am facing an issue with the CSS code for a table positioned at the bottom of the screen. The current code includes a filter specifically for IE 8, but I need to make it compatible with IE 10 as well by removing the filter and adding a background color. ...

javascriptjquerycssinternet-explorer-10css-tables

Utilizing multiple sticky columns in BootstrapVue with Vue.js

I am facing an issue with multiple sticky columns in my layout. When these columns are set as sticky, they tend to visually stack over each other, sometimes causing the left-most sticky column to "peek" out from under the next one. Is there a way to add m ...

vue.jsbootstrap-4vuejs2bootstrap-vue

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

I'm currently working with Angular 8 to develop an application that retrieves responses from various APIs for users. The application is designed to simultaneously call multiple APIs and I require a loading indicator that stops once each API delivers a ...

cssangulartypescripthttp

Sibling proximity: an excess of elements separating the regulations

Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...

htmlcsshoverhidesiblings

Making the Select Tag function as an on-click event in JQuery

So I currently have a tab set up that functions as on click links when viewed on desktop. However, for tablet and mobile devices, I need it to be transformed into a select drop down list while maintaining the same functionality. Below is the code used for ...

javascriptjqueryhtmlevents

How can you add a new div directly after the parent div's content and display it in-line?

I have a banner that stretches to fill the width completely. Inside this main div, there is another smaller div measuring 30px in size positioned at the end. The nested div contains a close icon background image, and upon clicking it, the entire banner get ...

htmlcss

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

javascriptcssreactjscanvas

Instructions for submitting information from a web form using Python without needing to know the form's ID or name

I am currently attempting to automate the submission of data into the online forms found on this webpage: Unfortunately, I am unable to determine the specific names of these forms by inspecting the source code. I have tried using the requests python modul ...

htmlpython-3.xweb-scrapingpython-requests

The issue of unselection not functioning properly for multiple items when using both selectable and draggable features

i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...

javascriptjqueryhtmljquery-uidraggable

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

javascripthtmlnumberscurrency

Is there a CSS Grid that supports IE6+ with percentage-based layouts?

Seeking a sleek CSS grid system that is percentage-based with 12 columns and works well on IE6+ as well as all modern browsers. Support for nested columns would be a bonus but not mandatory. Many grids out there lack compatibility with IE6 or are based sol ...

cssinternet-explorer-6percentagegrid-layout

The process of loading a unique home page based on the screen size of the device

Looking for assistance on dynamically loading different home pages based on screen size. Any suggestions? For instance, if the screen size is less than 960px, I would like to show the default landing page as index1.html and if the screen size is greater t ...

htmlcsshttpwebresponseadaptive-design

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...

javascriptjqueryhtmlcssmobile

Sorting through various data inputs in one JSON file

I have a JSON file containing an array of objects: obj= [{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"t ...

javascripthtmlreactjsuitableviewmaterial-ui

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss

Currently, I'm developing a Django project and integrating django_bootstrap_icons. Despite successfully installing it with pip and completing all necessary steps, the icons are not displaying on the website

configurations.py INSTALLED_APPS = [ ... 'myapp', 'django_bootstrap_icons', ] ... STATIC_URL = '/static/' MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR,'static,'media') STATIC_ ...

pythonhtmldjangobootstrap-4offline

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

javascriptphphtml

Obtaining the referring URL after being redirected from one webpage to another

I have multiple pages redirecting to dev.php using a PHP header. I am curious about the source of the redirection. <?php header(Location: dev.php); ?> I attempted to use <?php print "You entered using a link on ".$_SERVER["HTTP_REFERER"]; ?> ...

phpjavascripthtml