I am a desktop programmer but currently I am trying to develop a website. I know HTML, CSS, Javascript and PHP but writing the complete code from scratch isn’t encouraged and well, I end up with weird website which messes up from screen to screen.
I switched to Bootstrap but it is predefined. I mean, the container and jumbotron and everything else has predefined attributes.
How can I use the same element on one page and another with different attributes (height, width, color). Should I use in-style CSS for things I want to change or should I keep on making different .CSS files for every page.
For example; in the following code, I am using a container to show something but now I want two containers. The second one should be wider and have a different color and font. Should I use in-style CSS or should I just create a new selector giving it a new name “container-2”.
<div class="jumbotron" style = "background-color:#18bc9c">
<div class="container">
<h1>Hello, world!</h1>
<p>Just a test</p>
<p><a class="btn btn-success btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
4
You question is a bit of a broad/opinionated “What’s the best way to manage the whole CSS thing?”.
It’s a great question, but I don’t think there is a single answer. I feel like the question is ultimately, “How do you work with Bootstrap?”
Bootstrap is a front-end framework. Frameworks generally include a lot of features but, by their nature, are a structure to build upon.
I’ll divide my answer into two parts, each for a different scenario. You might be either:
- A small to medium business or hobby website with little customisation required.
- A large business or complex website requiring heavy modification.
Small-scale
Examples: AussieOutages, {less}
You might easily get away with a CSS file or two to deal with all of these things. If you mostly use the built-in Bootstrap features, but occasionally need to resize or lightly restructure a component, just make a new CSS file and add in the requirements.
Personally, when I am using Bootstrap for light-modification use, I might use a CSS file called bootstrap-mod.css or bootstrap-custom.css.
The purpose of this file is to directly modify bootstrap components so that I have them all in a central location.
In another CSS file I might have classes the compliment native Bootstrap components without actually overriding anything. For example I might create a CSS class called btn-flashy. The new class doesn’t override any CSS styling, but maybe adds a new hover effect to make a button flash.
Large-scale
This is for websites that take Bootstrap and make heavy modifications to the extent that they may not be recognisable as Bootstrap users on initial viewing.
Here you will be taking the Bootstrap source and using tools like Grunt and CSS extention languages like {less}.
How can I use the same element on one page and another with different attributes (height, width, color). Should I use in-style CSS for things I want to change or should I keep on making different .CSS files for every page.
Inline styling is frowned upon. Use CSS files. A page can have its own CSS file, but it might be overkill. Instead try to name classes in a meaningful way. For example, if you need to change heights, widths and colours for a component, follow Bootstrap’s example by using my-component-lg, my-component-wide and my-component-bright etc.
1