4

How should one customize bootstrap elements? Should I use the exact same bootstrap classes in my custom.css or should I create new classes for every customization?

yN.
  • 1,847
  • 5
  • 30
  • 47

4 Answers4

4

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.

Brainmaniac
  • 2,203
  • 4
  • 29
  • 53
  • I disagree, inline styling is not very maintainable longterm, and in fact defeats the purpose of CSS itself. – Nathaniel Flick Mar 13 '17 at 08:33
  • 3
    @NathanielFlick I am absolutley not encouraging inline-styling. I think you misunderstood my comment. I encourage to make another class in the custom .css file that you can use in ADDITION to the bootstrap class that are used and needs modification. – Brainmaniac Mar 13 '17 at 08:46
  • 1
    There is no mention in the answer of inline styles. I think hes referring to overiding bootstraps classes with a new class, of course in a css file. – ajthinking Mar 13 '17 at 08:47
  • Right sorry, I misunderstood this: "adding that class to the HTML element in addition to the bootstrap class". You won't be adding a class to the html element. – Nathaniel Flick Mar 13 '17 at 09:32
  • Thanks for your answer! I had the same in mind and also think its better to create new classes. But on the downside, this result in many new classes... – yN. Mar 13 '17 at 14:45
3

1. Do not modify the bootstrap.css file

It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).

2. Create your own css file and overwrite whenever you want original bootstrap stuff

if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.

Add a Custom Stylesheet

Create a new file in your Bootstrap CSS folder and call it custom.css.

custom css

Now in the portion of your website, load your new custom CSS file after the default bootstrap stylesheet. It should look like this.

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

Applying Custom Styles To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.

For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.

.btn {
    border-radius: 0px;
}

Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.

Buttons Bootstrap square

The upside to adding your own custom stylesheet after the default bootstrap stylesheet is that in the event that Bootstrap gets upgraded, you can simply replace the Bootstrap stylesheet with the new one and your custom styles will remain untouched. Note that for major upgrades, you may need to modify your custom styles. Nevertheless, even major upgrades will still be much easier using this approach.

JMF
  • 1,083
  • 7
  • 17
  • I've already seen this answer somewhere else ty! It results in "it depends", if understand it right, isn't it? – yN. Mar 13 '17 at 14:47
  • Use own classes with this, is the best for future versions @yN. – JMF Mar 13 '17 at 15:53
1

As per your requirement if require all input change then get bootstrap class in your custom.css or add your own class for only one or two element.

bharat savani
  • 339
  • 5
  • 18
  • Thanks for your answer! So that would mean to use the original bootstrap classes in general. If I only want to change single elements, obviously I have to use special selectors. – yN. Mar 13 '17 at 08:21
  • Yes I agree with this. Don't 1. Change bootstrap directly or 2. Use inline styling, or 3. Use ID's, simply create a custom.css and make sure it always loads after the bootstrap.css; that way custom.css always overrides bootstrap classes. – Nathaniel Flick Mar 13 '17 at 08:33
  • Your welcome so please accept the answer too. @yN – bharat savani Mar 13 '17 at 08:49
  • @bharatsavani If I read your comment correct and you say to change the definition of bootstrap default class in your custom.css I dissagree with this beeing the best way. Maybe that works when working on your spare time alone but in a big company with more devs involved this could be a nightmare.... – Brainmaniac Mar 13 '17 at 09:03
  • It's all about requirements of our own codes – bharat savani Mar 13 '17 at 09:07
  • I used `class="dropdown-menu custom-dropdown-menu"` where `custom-dropdown-menu` contains only those css properties which I want to change from default ones in `dropdown-menu` like only `border-radius`. But always precedence is given to `dropdown-menu` and not `custom-dropdown-menu`. Why ? – Yusuf Jan 24 '22 at 05:08
  • @Yusuf put !important in your css and make sure to check that your style is imported after bootstrap style, this will work :) – bharat savani Jan 25 '22 at 05:34
  • @bharatsavani - how do i make sure if style is imported after bootstrap ? btw `!important` alone is solving the issue. thanks – Yusuf Jan 25 '22 at 06:14
0

You should charge bootstrap before and custom changes after. You can overwrite bootstrap's classes, but you should do it on another file.

It should be a good practice because you can upgrade bootstrap's library without problems and without losing your code

Marco Salerno
  • 5,131
  • 2
  • 12
  • 32
  • Ty, but I'm not talking about where to override the bootstrap classes. The question is whether one should override them by using the original classes or using new classes. – yN. Mar 13 '17 at 14:50