Customizing Bootstrap by incorporating my own external stylesheet

I've been working on learning Bootstrap and decided to challenge myself by trying to recreate this website:

However, I'm encountering difficulties when it comes to overriding Bootstrap and incorporating my own custom font. I attempted to add a Google font using the following code, but it didn't work:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

In my CSS file, I have added the following styling for the font:

html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}

I am also struggling with styling an image on the page:

    <section class="container">
    <img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
    </section>

And here is the CSS I attempted to use for styling the image:

section img .profile-pic{
margin-left:150px;

}

csstwitter-bootstrap

Answer №1

Consider Including in the Body Section

 body {
  font-family: 'Poppins', sans-serif !important;
}

The html styles will impact the entire document, but with very low priority. These will only be effective if there are no specific styles defined within the body section. However, in your scenario, Bootstrap has introduced its own styles within the body tag.

body {
    font-family: "Arial",Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    background-color: #f9f9f9;
}

This explains why your custom style was not taking effect.

Answer №2

In order to override any bootstrap styles, it is essential to include the "!important" declaration within your custom CSS style. Additionally, keep in mind that CSS prioritizes the most specific styling for an element, meaning that styles applied within html{} will be superseded by those set in p{}, h1{}, etc. It's important to remember that style sheets cascade, so any styles defined at the top will be replaced by subsequent styles targeting the same element.

Answer №3

If you want to override bootstrap css, make sure to add "!important" with your custom css style.

Also, remember to import your external custom css file after the bootstrap css file.

Take a look at the example below for more guidance:

<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<style>
  html{
    font-family:"Roboto", "Arial" !important;
    font-size:20px !important;
    font-weight:300; !important;
  }

  .h1-override{
      font-size:12px !important;
  }
</style>

<body>
    <div> testing bootstrap overriding </div>
    <h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>

 <h1 class="text-center text-uppercase">without custom style</h1>
</body>

</html>

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

Solid Text Overlay on Transparent TextArea in JavaFX/CSS

In my JavaFX CSS style sheet, I currently have the following code for a tag called #myText in my FXML file. This code results in a black textArea with red text, which is exactly what I want. However, I now want to make the background of the textArea tran ...

javacssjavafxfxml

The reason CSS properties do not inherit automatically

As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...

htmlcssflexboxalignment

What is the process for applying this specific style to a certain element?

Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...

cssangulartypescript

What could be causing the arrows on my card carousel to malfunction?

I'm facing some issues with my card carousel functionality. I'm in the process of learning JavaScript and I believe that's where the problem lies, but I'm unsure how to resolve it. Every time I click on the button/arrow for the carousel ...

javascripthtmlcssbootstrap-4

Applying different styling to the same class within a different element using the + selector

Have you ever come across a website with code similar to what I've shared on this jsfiddle: https://jsfiddle.net/roa8k7js/ This particular site boasts an elaborate CSS styling sheet, exceeding 10,000 lines in length. When transitioning this website t ...

htmlcsscss-selectors

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

I'm currently utilizing a Bootstrap 4 masonry card layout for a particular project, and within this project, there is a <select> element that has been styled with custom CSS properties. One of the customized styles includes a caret created using ...

csstwitter-bootstraptwitter-bootstrap-4column-count

my divs are not being affected by the max-width property and are retaining their

I've been learning CSS and HTML through an interesting tutorial on Udacity. Here's the code I've been working on: .image{ max-width: 50%; } .app{ display: flex; } .description{ color: red; max-width: 705px; } <h1 class="title" ...

htmlcssflexbox

Tips for aligning the first element in an inline-block list item horizontally

I'm working on a list with horizontal scroll functionality to allow users to view content by scrolling. I have successfully implemented this, but I'm facing a couple of challenges that I need help with: I want the first item in the list to alwa ...

javascriptjqueryhtmlcssbootstrap-4

Enhancing Blog Navigation with PicoCMS Pagination

After successfully setting up PicoCMS on my website, everything seems to be working well except for the blog pages. I am having issues with the "Older Posts" button not functioning as expected. Unfortunately, I couldn't find any information in the the ...

phpcsshtmlpagination

Hovering over text can change the width of the background color

I'm currently facing a roadblock while working on my website. I have successfully adjusted the height of the list items on my navigation bar, but now I am struggling to expand the width so that when hovering over it, the background color covers a slig ...

htmlcss

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card

Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

I currently have an interactive image-map embedded on my website. Here is the HTML code: <div id="italy-map" class="affiancato verticalmenteAllineato"> <div id="region-map"> <img src="./Immagini/transparent.gif" title="Click on ...

javascriptjqueryhtmlcssimagemap

Formatting of large numerical values with jQuery

I have a huge table with numbers and other data. I want to color the large numbers based on their value in decimal, hundreds, thousands, and millions. For example: <tr> <td class="numColour">20,000,365.00 ISK</td> <td class="nu ...

jquerycss

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss

`Inconsistency in image width behavior observed in Opera browser`

I am very new to HTML and CSS3. I am teaching myself as I work on creating a new website. For some reason, my image gallery is not displaying properly in Opera browser. The width of portrait images appears distorted only in Opera, whereas landscape images ...

htmlcssoperaimage-size

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Seeking to display a unique CSS style on my HTML FORM prior to invoking a service in my code and then reverting back after receiving the response. I have implemented the use of ng-class to dynamically add the class when the boolean activeload1 is set to tr ...

javascripthtmlcssangularjs

The collapse menu toggle feature seems to be malfunctioning, as it is not functioning properly

I've been working on a website at , where the toggle menu is causing the content to hide when the menu is expanded. <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active"> <div class= ...

javascripthtmljquerycssbootstrap-4

Ways to prevent the selection of images

Whenever I click on the ball, a click event is triggered. However, sometimes it doesn't work because I accidentally select the image and it interrupts the click event. I attempted to remove the selectable property using the following CSS properties, ...

jqueryhtmlcss

What is the best way to horizontally center a div with the layout attribute set to "row"?

I am currently working with a grid composed of cards from the Angular Material library. The issue I am facing is that the cards have a fixed size, which results in extra space on the right immediately after wrapping. My goal is to eliminate this space by ...

cssangularjsangular-material

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

javascriptjqueryhtmlcss