CSS Customizations should be added to a separate custom.css file to ensure maintainability. This will guarantee that the original Bootstrap-style files will remain unaltered.
Order matters in CSS. So, the final definition of a particular CSS rule will override the previously defined rules when the CSS selectors & properties match. This is exactly why the custom.css reference should follow after Bootstrap.css.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"><link rel="stylesheet" type="text/css" href="custom.css">
Ex: /* removes border from card and adds box-shadow property */ .card { border: none; box-shadow: 0 1px 20px 0 rgba(0,0,0,.1); }
Using selectors that are not specific will not give you desired results, as the component will end up taking the default bootstrap styles even though we have written the custom styles in custom.css file. It is best to use CSS overrides for simple Bootstrap customizations, but we recommend you to try the SASS method when it comes to making extensive customizations.