Hi all
I’m trying to edit the looks and feel of the buttons in bootstrap so they look like the buttons that came in the FCC tutorial, but the files is a mess! This is the bootstrap.min.css files.
Does it look like this for anyone else, or only for me? How can I make sense of it, and is there a clean version available?
I’m using the btn element.
Just read this. Does this mean I style the btn element in my styles.css sheet, and it will edit how the button looks?
Maybe a silly question but why don’t you simply edit your CSS file to override the Bootstrap ?
Just seen that, I’ll try it out.
Sorry for the noob questions 
Does anyone know the code that the FCC thing used? I like the look of them. 
Never be sorry ! I’m a noob too and have to awful tendency to try to answer questions…
Thank you! 
Its does help 
min means minified - i.e. all the whitespace is removed.
In your screenshot there is a bootstrap.css - try that.
Okay, will do!
Can someone send me the code that the FCC used in their example of the button? I’m trying to do it like that, but I’m struggling.
Yes, and you’ll probably have the situation where your css doesn’t take effect at all. In that case, open your Inspector (Dev tools) and look at the element in question. If your css is barred, that means that Bootstrap is stronger, that is, that they use more specific selectors. So just copy the selector and put it in your CSS file.
If you’re not sure about what I mean, look in the wiki, here or also this cheatsheet for CSS selectors.
Cool! According to the link, if you have the styles.css lower down in the header, it overrides the bootcamp.min.css. Is this right?
Yes, that’s the minimum condition for it to work at all, but after that you’ll need to make sure your CSS selectors are specific enough.
Pro forum tip: You don’t need a third party website to host screenshots. You can actually drag and drop pictures that you want to share right into the text box. Like this:
Truly, we are living in the future…
waouw…that’s how you get to post your terrible pictures and gifs all the time ! Thought it was a moderator privilege 
Yep, but the pictures sometimes don’t upload for some reason 
It’s not a mess, it’s a minified version of CSS. It’s minified in order so that browser loads less resources and to load faster. Also to transfer less internet data. You will see a lot of .min.css and .min.js files as you develop web applications.
If you need a particular element from the Bootstrap framework, take it from the bootstrap.css file, everything is beautified there. 
Note that bootstrap.min.css & bootstrap.css are exactly the same, only one is smaller and the other is larger (kilobytes).
If you still have any examples of image uploads not working, please file a bug report on the GitHub page
Yes indeed the dev tools inspector is definitely the key in this situation
I suggest you NEVER modify the Bootstrap CSS file, but simply attach your own stylesheet file (after the Bootstrap one) and make your changes there.
This way you can link the same unmodified Bootstrap CSS file to other projects, to which you could add different mods as you like.
Also, you could replace the Bootstrap CSS file with one from a different Bootstrap theme. This will work best if your original Bootstrap CSS file was never modified.
Hi, first @macloo is right you should never modify the Bootstrap file.
What I want to address here is the mess part. The file is looking as it should be because it went through the minification > Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality.
In production mode this process allows you to reduce the file of JS and CSS. If you are developping you should try to use the non-minified version which does not have the min part. But it is not necessary because you should do it preferably as @macloo suggests.
Good luck
GiacomoLaw
I know that there have been a number of responses to your question, and linked tutorials that may have provided you with an answer… but I’ll chime in with the two most important aspects that I’ve learned in overriding Bootstrap.
First, in the <head> of your document, link to your custom CSS stylesheet after Bootstraps… or any other template CSS for that matter. The browser reads the the HTML from top to bottom. So your CSS should be ready to override the predefined styles.
However… the second and more important key to overriding Bootstrap is ensuring to target the element with at least the same specificity as they do. For instance:
Bootstrap adds their default button styles to an element with the .btn class.
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; etc... }
Then they add additional styles with classnames such as .btn-default.
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
If you were to only target the <a> tag and try to add 20px of padding for instance, your CSS would be overridden because Bootstrap uses class names which has a higher specificity value than just a tag. Follow the recommendations above, and overriding any Bootstrap CSS should be a cinch from now on!
P.S.: And as others have pointed out, yes, minified CSS is a “mess”. But it’s a good mess and a mess for a reason.