To make an attractive website with a consistent, clear user interface, you
could write a whole lot of CSS rules… or you could use a CSS framework
.
And in particular, unless you have certain constraints or a pre-existing
preference, it’s not a bad choice to use
Bootstrap.
Bootstrap is a framework distributed as a set of CSS rules that you apply to a particular HTML structure; that is, the CSS rules apply correctly if you structure your HTML in a certain way and use the CSS classes provided in the framework. It provides simple mechanisms for creating columns, common UI elements, “responsive” webpages (pages that display well on various screen sizes, from mobile to desktop), accessibility features, and other important features of modern webpages. Bootstrap provides some functionality via javascript code, as well, but it can be ignored, at least at first.
Learning Bootstrap¶
W3School’s Bootstrap Tutorial is a fairly good one. It lets you view the results of live code examples. Work through the tutorial up through the Typography section, at least.
When working with Bootstrap, the official documentation, which is quite good, is the first place you should look for answers to any questions you have.
- You can’t go wrong with the Getting Started section of the official documentation. The starter template provided there is a good way to start developing your own HTML page (or template, for a web app).
- Then, read through the Containers and Grid subsections of the Layout section to get an idea of how to lay out the major sections of your page.
- From there, quickly skim the Content and Forms sections of the documentation to learn what sorts of classes Bootstrap provides for formatting and laying out elements in pages. The Components section is full of “fancier” things that might also be useful, but they are not as critical. Skimming those will help to have a rough idea in mind of what Bootstrap provides so you know to look for certain things later.
- As you develop your page(s), refer back to the Content, Forms, and Components sections as needed for particular items.
If the official documentation doesn’t give you what you need in some cases, simple web searches (e.g., “bootstrap button” or “bootstrap forms”) can find you most of what you will need to know. Often you’ll end up back in the official documentation, anyway. StackOverflow questions will cover most of the rest.
The column system is central to using Bootstrap effectively, and it can take a bit to wrap your head around it. Learn the Bootstrap 4 Grid System in 10 Minutes is a good, clear introduction to it (the concepts are the same in v5).
Bootstrap files can be added to JSFiddle documents as “Resources” (paste the CSS URL from Bootstrap’s Quick start to add it), which gives you a simple way to quickly try out new things and figure out how to use them.