How can I prevent Bootstrap from disrupting my CSS layout and what steps can I take to rectify the issue?

Apologies for any language mistakes, as this is my third language and I am new to web design.

I want to create a simple website using html, css, and bootstrap that does not need to be responsive. I have successfully added a sticky Navbar with javascript and css which looks good. However, after adding Bootstrap to the html document, the style of the navbar changed. It lost its stickiness and now has a strange white border at the bottom.

If anyone can offer assistance, it would be greatly appreciated.

I am working in Brackets locally and do not intend to publish the website.

Wishing you all a Merry Christmas!
Basti

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

WHY?

Your CSS declarations were overridden by Bootstrap's declarations:

For example, I attempted to set color:red, but here is what happened:

https://i.sstatic.net/KaTmv.png

To minimize conflicts between your CSS and Bootstrap's CSS, follow these steps:

  • Place your CSS link below the Bootstrap links

    <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="yourCss.css" rel="stylesheet">

  • Use Specificity in CSS by using unique id or class

    Specificity is how browsers determine which CSS property values are most relevant to an element and will be applied. It is based on matching rules composed of different types of CSS selectors.

  • If your CSS declaration has been overridden, consider using !important

    For example: color:red!important

Answer №2

Bootstrap is a popular frontend framework known for its pre-defined classes that can easily change the style of your website. To customize these styles, you can add your own custom CSS. For example, one of the pre-defined classes in Bootstrap looks like this:

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

Notice that "alert alert-primary" consists of two classes - "alert" and "alert-primary". These classes determine the predefined styles of the element. To modify these styles, you can add another class and define its custom style in your CSS file. Here's an example:

<div class="alert alert-primary anotherClass" role="alert">
  A simple primary alert—check it out!
</div>

You can then style this new class by targeting it in your CSS:

.anotherClass {
  /* Add your custom styles here */
}

Don't forget to link your CSS file.

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

Select an item from the options available

Looking to automatically select a specific item from a combobox upon clicking a button on my webpage. The page includes both PHP and JavaScript code for this functionality. Currently, I have a JavaScript function triggered by the "onclick" event of the bu ...

phpjavascripthtml

Transfer text with style from a JTextPane to Microsoft Word

I'm trying to transfer styled text from a JTextPane to Microsoft Word. My current code gets the job done, but it struggles with accented characters: Clipboard clp = Toolkit.getDefaultToolkit().getSystemClipboard(); ByteArrayOutputStream ot = n ...

javahtmlswingms-wordclipboard

Inject various JavaScript data into different div containers

The issue at hand is quite straightforward. Here is a sample for displaying a single variable in a div with the "container" ID: let first = 5; document.getElementById('container').innerHTML = first; <div id="container"></div> How ...

javascript

Unusual challenge encountered when trying to switch colors and erase canvas content with button click

I am working on a code that utilizes a canvas for drawing purposes. My objective is to allow users to change the color of their drawings by clicking on specific buttons. The default color is black, but I have buttons set up for changing it to red or gree ...

javascripthtmlbuttoncanvasuser-interaction

Issue with the functionality of socket.io callback functions

Previously, I used to utilize the socket.io emit callback in the following manner: On the client side: mysocket.emit('helloworld', 'helloworld', function(param){ console.log(param); }); On the server side: var server = r ...

javascriptangularjsnode.jssocketscallback

Seamless transitions while deactivating a conditionally displayed component in React

Here is my code snippet from App.js: export const App = () => { const [toggled, setToggled] = useState(false); const [ordering, setOrdering] = useState(false); const handleColorModeClick = () => { setToggled((s) => !s); }; const ha ...

javascriptreactjscss-animationsconditional-rendering

Discovering all input elements by utilizing nextAll in jQuery

Here is the HTML structure: <div class="field phone"> <input type="text" maxlength="3" /> </div> <div class="field phone number1"> <input type="text" maxlength="3" /> & ...

javascriptjqueryhtmlinputfocus

Leveraging the Recyclability Aspect of a ReactJS Modal

Looking for a way to make a modal dynamic without duplicating too much code. Any suggestions on how to achieve this? I've managed to separate the state from the layout using render props. interface State { open: boolean; } interface InjectedMod ...

javascriptreactjstypescriptreusability

Can you help me navigate through the router dom v6 to match product IDs from the API?

How do I display a specific product when it's clicked on based on its id from a Django Rest Framework API? I was previously using match from React Router DOM v5, but I'm not sure how to achieve the same functionality since match doesn't exis ...

javascriptreactjsaxiosreact-routerreact-router-dom

Why is my JSON object showing up as undefined in my Node.js POST request?

I have a CentOS server that is currently running a node.js HTTP server (code provided below). My goal is to pass JSON data from the command line by using the following CURL command: curl -X POST -H "application/json" -d '{"val1":"hello","val2":"my"," ...

javascriptjsonnode.jsexpresscentos

The router is unable to direct when an item is clicked

I am encountering an issue with my routing setup - when I click on an item in the list-item component, it does not successfully route to the detail-component. Here is a glimpse of my source code: product-list.component.html: <h1>Product List Compon ...

javascriptangulartypescript

Endless loop in RxJS when updating the Ngrx store

// Custom Component HTML <button (click)="reRoute(1)">Select</button> // Custom Component TypeScript reRoute(id: any) { this.store.select(fromStore.getBasketEntities).subscribe(data => { const dynamicUrl = id + '_' + Object ...

javascripttypescriptrxjsngrx

How can HTML output be automatically indented?

Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...

phphtmlindentation

ways to instantly showcase the input's value within a DIV element

For example, I have a div with the ID of "someDiv" and an input text field with the ID of "someInput". How can I make it so that the value entered into the input field displays in the DIV in real time? For instance, if I type the letter "a" in the input fi ...

javascriptjqueryinputaddeventlistener

Connect a group of <div> elements via a hyperlink

Every time I attempt to add a hyperlink to the code snippet below, it interferes with the layout of the image and only links the icon rather than the entire flex container. I've experimented with <span> elements but haven't found a successf ...

htmlcsscss-animations

Making lightbox/dhtml appear in front of flash

After extensive research, I have come across numerous posts highlighting the importance of modifying the embed-tag with wmode="opaque" in order to force lightbox and other dhtml elements above flash content. Simply adjusting the z-index of the desired elem ...

cssflashdhtmllightbox

Conceal the main div when the nested div does not contain any content

Is there a way to hide the parent div EventsRollup when the child div RelatedEventsList is empty? <div class="EventsRollup"> <span class="EventsRollupTitle">CPR &amp; Health Safety Classes</span><br /><br/> ...

javascriptjqueryhtmlhide

How can I loop through an object in React using TypeScript?

This is specifically for React. Let's consider the following object structure: interface Profile { name: string; title: string; } const NewPerson: Profile = { name: "John Smith", title: "Software Engineer" } Now, I want to display ...

javascriptreactjstypescript

Cleaning up unwanted objects in THREE.js webGL

Our app utilizes THREE.js to showcase 3D body meshes. We have a special object named MeshViewer that manages the rendering process; within the initialize method, we establish this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBu ...

javascriptthree.jswebgl

The insecure connection to http://bs-local.com:3000 has prevented access to geolocation

Hi everyone, I hope your day is going well. I could really use some assistance with an issue I've run into. I'm currently trying to test my React web app on BrowserStack's mobile screens, but I am doing the testing locally using localhost. ...

javascriptreactjstypescriptbrowserstack