The styles of Bootstrap 4 are not being used

My Bootstrap 4 css file isn't working properly and I need space for my navigation bar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<div class="container">
  <a class="navbar-brand" href="#">Start Bootstrap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

I've also added this code:

.navbar-nav>li{margin-right:20px;margin-left:20px;}

Interestingly, this code only works when added directly to the index file, not when included in the bootstrap.min.css file, even though the CSS file is in the correct directory.

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">

How is this possible?

Why does the .fixed-bottom class impact my navigation code without linking the CSS file? The .fixed-bottom class is in bootstrap.css which is not included in the meta tag, only bootstrap.min.

cssbootstrap-4

Answer №1

I gave it a shot and it seems to be working fine. You have the option to create a separate CSS file for your custom rules (perhaps named custom.css). I believe it's not ideal to include custom code directly into the plugin's CSS.

Why is it that the class .fixed-bottom is impacting my navigation code even though there's no direct link to the CSS file (.fixed-bottom class is in bootstrap.css where the lines are not specified in the meta tag, only bootstrap.min is mentioned)

This is because there is no distinction between bootstrap.css and bootstrap.min.css, the CSS rules within both files are identical, with the only difference being that the "min" version is compressed for enhanced performance.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-nav>li{margin-right:20px;margin-left:20px;}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<div class="container">
  <a class="navbar-brand" href="#">Start Bootstrap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

Answer №2

Avoid modifying bootstrap.min.css to prevent the need to redo changes with each new version release. Instead, create your own CSS file and include it separately after Bootstrap's to ensure that your custom styles take precedence over Bootstrap's (this is known as the "Cascade" in Cascading Style Sheets).

Another option is to utilize the Content Delivery Network (Find "Bootstrap CDN" here) so that users who have previously visited a Bootstrap-powered site do not need to download Bootstrap again when accessing your site.

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

"Troubleshooting issue in Django 1.6.2 where CSS styles are not being applied to

I am encountering an issue with this code and would greatly appreciate some assistance. The base.html file contains a {% block content %}{% endblock %}. I have created a Signup.html file structured like this: {%extends 'base.html'%} {% block co ...

pythonhtmlcssdjangohttp-redirect

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

I'm trying to make the text adjust its center to the height of an image that changes size when the page is resized. Here's what I have so far: HTML <section id="eyeCatcher"> <div id="catchContainer" > <div id="eyeCatchQ ...

htmlcssimageresponsive-design

Adjust the background color as you scroll

I am looking to create a functionality where the background-color of my header changes to match the background-color of the div it is currently scrolling past. For example, if the user scrolls to the #about section (which has a green background), I want th ...

jquerycss

Override CSS properties / prevent inheritance

I'm currently facing a challenge in Wordpress where I need to insert a link quickly, but there are intricate styles applied to all the anchor links within a specific section. Here is a snippet of the CSS selector and styles being used: div.content-ro ...

htmlcss

Exploring ways to access an element's background color through JavaScript

Is there a way to access an element's CSS properties that are set by a class name in JavaScript? In the case of the first div element, I have applied a "red" class which sets its background color to red. However, when I try to access the div's b ...

javascripthtmlcss

Delay the occurrence of a hover effect until the previous effect has finished executing

As I hover over an element, the desired animation is displayed while hiding other elements on the page. The challenge I'm encountering is that if I quickly hover over many divs, the animations queue up and hide the divs sequentially. I want only one ...

javascriptjquerycssjquery-hover

The CSS tag combination of 'position:relative;' and 'top:xx%;;' functions properly in Chrome, however, it does not work in any non-webkit browsers such as Firefox, Internet Explorer, Opera, etc

Encountering some strange behavior with a simple piece of code that I can't seem to figure out! I am trying to position a footer navigation at the bottom of my page using 'position:relative;' and it works perfectly in Chrome. However, in FF ...

htmlcssresizepositionfooter

Page load triggers background color shift

Here is the structure of my markup: <div class="authentication"> <div class="form-inputs"></div> </div> My goal is to have the color of the authentication section slide down from top to bottom when the page loads. Initially, the ...

javascriptjqueryhtmlcss

Card body alignment in the center (using Bootstrap)

I'm having a minor issue with aligning the columns in the card body to the center. In the image, you can see that it's slightly off to the left compared to the button. I've tried using various Bootstrap classes, but I haven't been able ...

htmlangularbootstrap-4

Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox? The animation I am referring to is defined as follows: // Animations @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } ...

css

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

javascripthtmlcssvue.jsvuetify.js

Is optgroup malfunctioning in IE 10?

My main question is: does optgroup not function properly in IE? The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/co ...

javascriptjquerycssangularjsinternet-explorer

What is the best way to combine flex-direction and flex-wrap in one row?

I'm working with a React component that looks like this: <Card className='form-margin width card' zDepth='3'> <CardText> <strong>Test</strong><br /> This is some text </Card ...

cssreact-nativeflexboxreact-native-flexbox

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

csshtml

Unable to find the XPATH element with Selenium in Python due to element not being located

Can anyone help me troubleshoot? My XPATH seems correct, but it's showing 'no element found' error. I also attempted using find_elements(By.XPATH, "/html/body/div[3]/div[3]/div[5]/div[1]/table[*]/tbody/tr[*]/td[1]/a") import time from selen ...

htmlcssseleniumselenium-webdriverxpath

Using CSS for hover transitions can be glitchy in Safari, especially when trying to keep images centered

After seeing an example on Design Shack, I was inspired to create linkable photos that zoom in slightly when hovered over. To achieve the desired centered animation effect, I had to tweak the top, left, margin-top, and margin-left properties until it worke ...

csshovercss-transitions

challenge with incorporating rating system using jQuery

I am facing a simple issue here, but my knowledge of jQuery is limited and I'm struggling to find a solution. I have been trying to implement a rating function using the code from this link: Everything seems to be working fine, but I noticed that on ...

jqueryhtmlcssjquery-selectors

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

jquerycssaccessibility

Leveraging bootstrap for achieving vertical and horizontal centering of images

My webpage uses bootstrap to display content, and while I've managed to center my images vertically, I'm facing an issue with horizontal centering. I want to ensure that any image, regardless of size, remains within the column/row and adjusts it ...

htmlcssbootstrap-4

Adding HTML elements to a button using an array: a step-by-step guide

In the process of developing a web application feature using JavaScript, I have come up with a simple plan: Place a button in the bottom left corner. The button should only become visible after scrolling begins. Upon clicking the button, a new window wil ...

javascriptjqueryhtmlcsstwitter-bootstrap