1

Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.

j08691
  • 204,283
  • 31
  • 260
  • 272
Mitchell
  • 111
  • 15
  • You add your own css file and add the changes there, include your css file AFTER the bootstrap css – Alon Eitan Mar 23 '16 at 19:15
  • Possible duplicate of [How to overwrite styling in Twitter Bootstrap](http://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap) – Roger Mar 23 '16 at 19:15
  • You can override the classes in your own CSS file (make sure you import it into your HTML *after* the original CSS files from bootstrap) - However, if you are going to make lots of modifications like that, I suggest you create your own customized version: http://getbootstrap.com/customize/ – blurfus Mar 23 '16 at 19:16

2 Answers2

1

Two methods that I know of:

1) Make edits to the .min.css file, or

2) Add '!Important' to the your personal css, like so:

.testDiv{
       font-color: white !Important
    }

This will overwrite any classes that have set a font-color for .testDiv

*note: using !important is not a recommended technique, but it gets the job done

Eric Furspan
  • 742
  • 3
  • 15
  • 36
  • I actually saw in another post an option was to use JS Minifier. Works great. http://fmarcia.info/jsmin/test.html. Thanks. – Mitchell Mar 23 '16 at 19:35
  • 1
    The problem with this approach is thta if (or when?) you need to upgrade to a newer version of the framework, you need to re-do/re-apply your changes. This is not maintainable in the long run. Pitty is was chosen as the answer – blurfus Mar 23 '16 at 21:02
0

You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like, 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">

<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">

<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>

However, if you are going to make lots of modifications like that, I suggest you create your own customized version

blurfus
  • 13,485
  • 8
  • 55
  • 61