Struggling to apply my own custom styles with Bootstrap?

I'm facing an issue with my custom stylesheet in conjunction with Bootstrap. At the start of my header.php file (which I import at the beginning of index.php), I have the following code snippet:

<html>
<head>
<link href="includes/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/mystyle.css" rel="stylesheet">

UPDATE: I discovered that I can successfully include the file if it is in the same folder by using: 

<link mystyle.css" rel="stylesheet">
, but when I move the file to the includes folder and try to import it as before, for some reason it fails to work. It's quite puzzling...

cssbootstrap-4

Answer №1

To ensure proper styling, consider utilizing a more specific selector or incorporating the use of !important (although this is not always recommended).

For instance, establish an id for your menu such as my-menu, and then adjust the selector accordingly:

#my-menu {
  width: 300px;
  height: 400px;
}

If you prefer not to utilize an ID, you can try applying !important:

.dropdown-menu {
  width: 300px !important;
  height: 400px !important;
}

Answer №2

The issue was resolved by moving the file outside of the includes directory. After attempting to place it back in the includes folder and referencing it with 

<link href="includes/mystyle.css" rel="stylesheet">
, everything is functioning correctly now. It appears that there may have been a simple spelling mistake causing the initial problem. Problem solved!

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

Is it possible to create a stylish CSS shadow effect?

As I work on converting a PSD design into HTML/CSS, I've encountered an intricate shadow effect created by the designer. I am struggling to replicate it using CSS. Is there a way to achieve this? If yes, then how can it be done? The shadow style is s ...

css

The Bootstrap row has surpassed the maximum height of the container-fluid

I've encountered a problem while working with the bootstrap grid system (Version v4.5.2). I have set a max-height of 50vh on a container-fluid, which is working fine. However, when I add a row with 2 columns to the container, the images within the row ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to align the Title in the Titlebar to the center?

Hi there! I could use some assistance :) I have an Electron app and I'm working on the title bar. I would like to center the title, but I'm not sure how to do it. Can anyone provide guidance on this? Also, since I am a beginner, I'm unsure i ...

htmlcsselectron

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS anim ...

cssthree.js

What could be causing the extra room at the bottom of my webpage?

I've been teaching myself how to create responsive websites using Zurb's Foundation 6. I've successfully built a simple website, but I'm facing an issue with spacing at the bottom of the page. The problematic areas are the "pagination" ...

htmlcsszurb-foundation

Example of using the CSS property white-space with break-spaces

I've been searching for an example of using css white-space: break-spaces for hours with no luck. Most tutorials only cover examples for normal, nowrap, pre, pre-wrap, pre-line. When it comes to break-spaces, the information available is limited to qu ...

csswhitespace

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

How can I align the starting point of a Bootstrap div col to the center?

Is it possible to change the layout from this https://i.sstatic.net/Dc8Yi.jpg to this https://i.sstatic.net/TcQU0.jpg? I want the content added to always start from the center and spread to both sides, like in the second image. Can this be achieved? Here ...

htmlcsstwitter-bootstrapbootstrap-4styles

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

javascriptcssreactjsmaterial-ui

Enlarging the font size of a specific <a> element dynamically with JavaScript, while ensuring that the padding of surrounding <a> elements remains

I have the following code snippet to display 3 links side by side: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> <ul id="navigation"> ...

javascripthtmlcss

Applying CSS styles to a page depending on certain conditions

Currently, I have a page in SharePoint that can function as a pop-up. I am using JavaScript to identify whether it is a pop-up by checking if window.location.search.match("[?&]IsDlg=1"). However, I am struggling to figure out how to insert CSS based on ...

javascriptcss

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

The group of links is positioned beyond the bounds of the containing div

Check out this code snippet from <html> <head> <style type="text/css"> .wrapper1 { width: 65%; margin: 0px auto 0px auto; border: 1px solid; text-align: center; background: #eeeeee; } .wrapper2 { clear: left; ...

css

Getting the hang of revealing a div through flashing

Is it possible to make a div flash using CSS alone? My goal is to have this div alternate between two colors. .chat-window .msg-container-base .notification-message-unread{ float: right; font-size: 10px; color: #666; background: white; padding ...

htmlcss

Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...

htmlcss

Tips for navigating through elements generated with ng-repeat as I scroll

There is a list generated using ng-repeat along with two buttons for moving up or down. Users have the option to select any item from the list and utilize the buttons to navigate through it. However, when I lower the selected item using the "go down" butt ...

javascriptcssangularjsscrollscrollbar

Displaying or concealing list elements in Angular 6

I am working on a simple Angular app that displays a list of items. I want the behavior to be such that when the first item in the list is clicked, its description (card) should be displayed. And, if the second item is clicked and its description is displa ...

javascriptangularhtmltypescriptbootstrap-4

Validation failure in the CSS document - Syntax error

I have searched high and low for a solution to my CSS 3.0 validation issue, but none seem to fit the bill. I am struggling with parse errors in the beginning and despite checking for invisible characters, I can't seem to pinpoint the problem. What co ...

htmlcssvalidation

Leveraging parameters or pre-established variables within CSS

After successfully adding CSS to customize a checkbox, I utilized a local file (check.png) as the background image and cropped it within the checkbox boundaries. Below are two examples of checkboxes: one checked and one unchecked I am now curious if ther ...

javascripthtmlcsscheckbox

Troubleshooting a CSS template with padding and margin discrepancies

I have a question regarding my code: http://jsfiddle.net/spadez/rAQYL/1/ Within my code, I am attempting to accomplish three tasks but I seem to be encountering some difficulty. Eliminate padding below "admin" (where you see the green background) Get ...

htmlcss