Is it possible for bootstrap to be integrated with specific CSS styles?

I want to utilize bootstrap to create some columns using predefined classes like .col-sm-, and include additional widths for smaller phones. Despite seeing the layout looking fine on Chrome and a few devices, Netbeans throws a "class not found" message for each one. Unsure if only some are actually working properly. Any clarification would be greatly appreciated!

<!DOCTYPE html>  
<html lang="en">  
...  
<meta charset="utf-8>  
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <link type="text/css" rel="stylesheet" href="css/mycss.css">  
    ...  

    <div class="row"  style="background-color: greenyellow; color: crimson">  
        <div class="col-xxxs-2 col-xxs-2 col-xs-2 col-2 col-sm-2 col-md-2 col-lg-2 ">  
        </div>  
    </div>  
</html>

The CSS styling is defined as follows: @media only screen and (max-width: 328px){
.col-xxxs-1 {width: 8.33%;}
....
}

Answer №1

It finally clicked for me how much easier the answer could have been. Perhaps that's why there weren't many responses or comments. I decided to strip away all of the Bootstrap classes from this section of code, except for the necessary 'col-lg-2'. Surprisingly, everything still functions perfectly on smaller devices without any conflicts between Bootstrap and custom classes.

With that said, there's no reason to keep this issue open any longer. The only lingering problem is the "fake messages from Netbeans" warning about missing classes as you hover over them in the HTML file (refer to the attached picture). This message can be eliminated by adding another link to the Bootstrap library, but it doesn't really provide any significant benefit.

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

Thank you!

https://i.sstatic.net/32u9i.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

The dimensions of my textarea and input field are different

Just starting out with HTML and CSS here. I'm trying to use flexbox to create a form, but the width of my input fields and text area is off for some reason. Any ideas on what might be missing from my code? Thanks in advance! Here's the CSS I&apo ...

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Take for instance the scenario where I possess the URL example.com/#foo. In this case, CSS styling will be directed to the div with the id foo. If achieving this solely in CSS is not feasible, what methods in JavaScript or jQuery can be used efficiently ...

Ways to flip the sequence of lines within a div without altering the formatting, word arrangement, and other elements

I need to rearrange the order of my lines while preserving the styling of words and the sequence I have created. Code Snippet: <textarea id="mytext""> Buy - 3 Potatoes $6.25 Sold - 3 Napkins $7.12 Buy - 5 Fries $11.62 Sold - 7 Pot ...

Modify the background color of a pseudo-element's property value dynamically

How do I change the background color of my burger menu by clicking on an icon? This is the CSS code I have: :root{ --pseudo-backgroundcolor: yellow; } .menu__icon span, .menu__icon::before, .menu__icon::after{ background: va ...

Dropdown sidebar with collapsible sections

I am looking to create a unique navigation system for my website. I have a standard HTML list with menu items that will serve as anchor links on a long-scrolling page. My idea is to design it as a minimal vertical side navigation bar, where each item initi ...

Controlling JS, CSS, and images with CakePHP 2.5 through the Cake controller

Currently, I am developing an application using the powerful combination of CakePHP and AngularJS. During my work on the AngularJS side of the project, I noticed that we are generating a large number of JavaScript and HTML files. I am interested in havin ...

Leverage scope variables and dynamic CSS properties when using ngClass

Is there a way to manipulate the CSS dynamically in HTML using a scope variable? <div ng-class="myClassScope, { 'dynamic-class': !ifIsNot }"> ...

Ensuring that an HTML CSS website works seamlessly on iOS devices

Hello everyone! I have a website that works perfectly on Linux, Windows, and Android devices. However, I'm struggling to make it function properly on iOS devices. Can anyone provide some tips on how to make my site more iOS friendly? Most of my friend ...

Media queries for Tailwind CSS in a Node JS application do not function properly when viewed on a mobile device

I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...

The button is not activating the callback function when clicked. It is unclear why this is happening as no errors are being displayed in the console

Utilizing an event listener on the button element, the user is prompted to select a language first. Upon selection, the button in question is presented to them. Clicking on this button triggers a callback function that allows the user to begin the quiz. Ev ...

Homepage divided in two sections akin to the Tumblr landing page

Have you ever visited www.tumblr.com and noticed the '30 reasons...' link on the registration page that slides up and reveals a second page? I've been trying to figure out how they achieve this cool effect. Most tutorials show how to scroll ...

Can someone please provide instructions on dynamically adding bootstrao col-lg {n} based on the length of a record?

Here is the desired outcome: 1. If there is only one record, it should be displayed as "col-lg-12". 2. In the case of 2 records, they should be represented as "col-lg-6" & "col-lg-6". 3. For 3 records, use "col-lg-4" & "col-lg-4" & "col-lg-4 ...

Highlighting menu elements when landing on a page and making another menu element bold upon clicking in WordPress

I've been searching extensively for a solution to this issue. I'm trying to make the menu item DE appear bold when entering the site, and if I click on EN, I want DE to return to normal (thin) font while EN becomes bold. You can find the site he ...

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution. In ...

Selenium: Utilizing the get_attribute() function with a CSS query

I am attempting to retrieve the value of the title attribute. There are multiple links on the page and I need to specifically select the first link and extract its title attribute. Here is the selenium command that I have used: self.se.get_attribute("c ...

The alignment of Bootstrap text is not in alignment

Hi there, I am pretty new to bootstrap and have been hunting for a solution regarding this specific layout that I want to achieve. Check out the image below: https://i.sstatic.net/qqaCo.png The issue I am facing is that in my code, the name, code, status, ...

Dynamically setting CSS values with jQuery to center an image within a div

I'm trying to center an image in a div according to the width of the image after I scale it to have a height of 250px. For example, if I had an image with dimensions 625x450 and, in my CSS file, set the height of the image to be 250px, then the width ...

Images are not loading properly on the website when viewed on an iPad

As I work on my website with a parallax effect, I recently came across an issue: images not displaying on iPod devices. Unfortunately, since I don't have access to an iPod, I am unable to verify this myself. Can anyone explain why the main pictures ar ...

CSS styling: Adjusting button placement to appear to the right of an HTML table

I've encountered a challenge with an HTML table that has dynamically generated columns through Ajax calls and jQuery, resulting in a variable table width. My aim is to include buttons at the top and bottom of the table that are aligned to the right b ...

Tips for showing text on top of a responsive image using CSS

I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask. The width of the mask is currently exceeding the width of the images. Is there a way to ensure that the mask ...