What is a difference between Bootstrap and CSS? I read the questions in stackoverflow saying that if you want responsive website and also, you are a newbie in Styling use bootstrap! ? Is Bootstrap something for beginners?
3 Answers
Bootstrap is essentially a front-end Framework that makes designing webpages and the general development easier. Bootstrap uses CSS, however it's different to writing your own CSS as it's all pre done so you just add a class to a HTML element and then it will use that CSS. So for example adding the class "img-responsive" to will use the pre made img-responsive class which is in the external Bootstrap CSS file.
Bootstrap is great because it allows you to easily create a responsive, cross browser compatible website really easily. For example making the site responsive without Bootstrap would require you using Media Queries etc, whereas with Bootstrap you can just give your divs class names to make it responsive.
Essentially Bootstrap uses CSS. But it's different to writing your own CSS as it's all pre made for you and you just need to import the external CSS file made by the people at Bootstrap, and you just need to know which classes to use etc.
Comments
Bootstrap is a "framework", that is: a pre-built set of files. Included in these files is CSS. Bootstrap uses, among other things, extensive CSS classes to style websites.
You can use Bootstrap without understanding CSS but if you are a beginner you should really learn HTML & CSS first.
W3Schools is a great resource to start learning about HTML & CSS
3 Comments
becky
So if i write my own code with CSS I lose my time? better off to go to bootstraping?
dlolsen
@becky by all means fiddle around with Bootstrap, but you won't be losing your time learning HTML & CSS, you'll be learning the fundamentals of what makes Bootstrap work, and thereby gaining an understanding of why it works. This goes a long way to debugging and modifying things in the future.
Thomas Scheffer
@becky I would suggest to learn CSS before tapping into bootstrap. As bootstrap 4 as really descriptive class names, its really useful to know what they do.
Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications.
Other answers are good. In addition, some more key details:
- Bootstrap 4 released in 2018, is a major rewrite from Bootstrap 3
- Bootstrap 4 does not work with older browsers (IE8, IE9), some have concerns over this, if you have same concerns then learn the older Bootstrap 3
At a quick glance, Bootstrap 4 looks to have steep learning curve compared to CSS3. Needed a grid for a small project, for simplicity & for learning CSS3 fundamentals (as other answer pointed), chose CSS3 over bootstrap. (CSS3 Grid, looks simple to code, examples: link1, link2, link3, link4, link5. Detailed description is here)
On additional note
if you are using React.js
then you could use material ui, see below links:
https://material-ui.com/getting-started/installation/
https://material-ui.com/components/buttons/
answered Aug 14, 2018 at 14:57
Manohar Reddy Poreddy
28k10 gold badges170 silver badges150 bronze badges
@mediaqueries in CSS. and the ECMASCRIPT have bought many features in JS, that can do everything easier than jQuery. CSS may take longer to develop because you may start from scratch. But it can make highly customized designs using plain CSS. and nowadays these frameworks are bloated with features. the coder may just needed a grid or something else.