0

I am trying to make an existing website responsive using Bootstrap. The issue is that some classnames in the existing css files there are classes defined that have the same name as in the Bootstrap css files.

I was curious, if there is a way to define the stylesheet to be used as a source for the class styles?

Imagine that there is container class defined in the original CSS files and the container class defined in the Bootstrap CSS. Is it possible to somehow distinguish between them? Or only renaming will do the trick?

Improve this question
1
  • 1
    Only option is to rename Commented Mar 8, 2018 at 9:56

7 Answers 7

Reset to default
3

Think on it well before dealing with this.

  • You can link one or another css on the declaration, but obviously it will work only the linked one on this view. (recommended if you don't need both)

  • If you link both (not recommended), the load of each can be different that you expect, creating visual glitches or loosing usabillity.

  • You can deal with load times expecting it to load as it's supposed (the first linked before the second one) that it's a bad idea because it depends on many things to work as it's supposed, or using javascript to make some stylesheet load after (not recommended).

  • Use !important statement (highly not recommended)

Why it's not recommended?

  • You will be overriding properties and values, making it unstable and increasing your load time, specially if you use javascript.

  • You'll loose the control over which property the browser is applying to an object and which not. Specially because Bootstrap will take preference over some properties even if the other css loads after (due to well accurated selectors).

  • !important, ironically is less important than a well accurated selector, so it only work sometimes dealing with Bootstrap. By the other part, it will make difficult each time you need to override a property value (try not to override if possible, but if needed, it's recommendable to use better selectors or different classnames or IDs to get a clean maintainable code).

What you can do?

you've different options.

  • The first one (the best one) is split this custom css into different css stylesheets depending on the view are needed, to avoid loading styles when there's no reference to them. The second step is to clean those css files, changing classnames to not interfere with bootstrap, and deleting possible duplicate or override of properties that bootstrap already has. You'll have a clean, fast and pretty css.

  • The second one is to change classnames on your css and cleaning it of possible override of properties that interfere with bootstrap.

  • The fastest one, if you hate a little the web owner, is simply changing classnames on your custom css, and the references to them on your HTML plus bootstrap classes:

    < div class="customContainer container"> ...

And start praying for the overrides to don't cause glitches on some version of some browser.

EDIT:

You've another option, that is editing bootstrap framework classnames, which is not recommended because you'll need to produce documentation and will be less maintainable (loads of programers/designers know bootstrap but not your modified bootstrap), and you'll have to waste loads of time doing it well.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Just add a custom class like "custom-container" and add style to this class.

Improve this answer

Comments

0

Rename the classes is the option for existing css. Same name is not option.

Improve this answer

Comments

0

Change your initial class names as the default bootstrap classes are needed to make your site responsive, or better still do an edit of the bootstrap bundle

Improve this answer

Comments

0

Step 1: Load your custom css file after you load your bootstrap.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
If that is still not working just add it as important. But avoid using this trick as it can override styling from base. Eg:

p {
    color: red !important;
}

Step 2:(better one) You can use IDs for styling.

#custom_id p{
  color: red;
}
<body id="custom_id">

Improve this answer

Comments

0

I will recommend you to use ID, because id is unique and use for specific styles. its always good to use rather than using !important on class properties later. Another option is rename classes.

Improve this answer

Comments

-1

First add bootstrap css and then add your css. The style in your class will override the bootstrap class styles(some styles in bootstrap are made important so that classes you should make important in your style).

Improve this answer

7 Comments

it's highly not recommended
Explain why it is not recommended?
Because bootstrap properties will take priority even if you try to override them due to accurated selectors, you can even use !important, but bootstrap will getting priority on some cases and you'll get less maintainable and dirt code. You can use accurated selectors+important, but it may causes to loose responsiveness on somewhere modifying bootstrap behavior. By the other part, load times are depending on many things, it does not work FIFO, it depends in major part on different servers load (if you use CDN) or your own server load if you're using only your own server, for example, etc
actually they are using only classes.priority will be based on the last important .
it will take effect the last loaded and it's innacurated and it takes a random effect sometimes as you can't control it only linking one before another
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.