Using Bootstrap and My Own CSS Together

Using Bootstrap and my own CSS together

You will have the stylesheets order like this, first you will include bootstrap css, then your stylesheet file. Why is that? Because that way you can overwrite the classes from the framework without using !important. You can write your own classes and include them in your layout, you can use bootstrap classes and make adjustments to them as you need. When you mix your classes and bootstrap classes check what attributes are added from their classes, do you need them or not etc...

Example

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/><style>  /* Your external css file will go here. This is just for testing :) */  .mycustombtn{  background: #000;}
</style>  

<button type="button" class="btn btn-danger mycustombtn">Danger</button>

Using Bootstrap CSS combined with Custom CSS - is this practice bad?

There is no problem with that , first you need to look at this linik

https://stackoverflow.com/a/26640525/6572922

then you need to reffer How to Easily Add Custom CSS to Bootstrap with Examples

http://www.kodingmadesimple.com/2015/01/add-custom-css-to-bootstrap-examples.html

This link can clear your doubts

Combining Bootstrap classes with custom CSS in Next.JS

Use back-ticks instead of the single quote when you have to combine multiple classes which are module-based and readymade.

import homeSytle from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className='text-center h-100'>
      <div className={`${homeSytle.bgMain} container-fluid`}>
        <h1>Test</h1>
        <button type="button" className="btn btn-primary mt-5">Primary</button>
      </div>
    </div>
  )
}

How to have your own style.css and bootstrap at the same time?

you should have something like this..

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

if you want to edit something from bootstrap, you can copy it's css and edit it...

for example, bootstrap.css has this lines...

.navbar-default .navbar-nav>li>a {
    color: #777;
}

if you want to change that, you should put in your style.css something like this

.navbar-default .navbar-nav>li>a {
    color: #fff;
    font-weight: bold; /* plus additional codes if needed */
}

just be sure that style.css is after bootstrap.css in order of <link> tags.

How to use css-modules and bootstrap at same time?

You need to import your CSS module styles from a module file specific to this component, then interpolate them into the classname via the returned object...

MyComponent.css

.myCustomClassName {
  color: #fff;
}

MyComponent.js

import styles from './MyComponent.css';

<div className=`row ${styles.myCustomClassName}` />

When output as HTML this would become something like...

<div class="row MyComponent__myCustomClassName___n1cC4ge}` />

So as long as you are loading the bootstrap CSS somewhere that should pick up on both

Using bootstrap classes or own classes to customize css?

I would recommend making new classes and adding that class to the HTML element in addition to the bootstrap class. That way you can overwrite AND add info to the bootstrap class and modify the element exactly as you want it.

Why like this?

This is a cleaner way because if someone else who know bootstrap comes in and works in your project you want to be able to reach the default un-changed bootstrap classes.

How to add custom CSS stylesheet when using Bootstrap

This may not be the best answer. But this is how I manage :

<div class="bootstrap-classes eg.navbar">
     <span class="custom-classes">hello world</span>
</div>

Use bootstrap classes in parent. Create a child and use your own classes on it. This works for me.

How do i use bootstrap and custom css i.e. home.module.css together in react?

Try using Template literals, I am currently working on a nextjs project and came across the same issue, and using Template literals solved the issue for me.

Egs.

<div className={`d-flex ${classes.root} ${styles.parent}`}>

See if the same works for you.

Custom css file not working bootstrap even tho it's linked right?

Order out of order

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">

---

Related Topics