Bootstrap 4 Notes
Bootstrap is a front end framework that consists solely of CSS and Javascript. As such it can be developed and run directly in the browser without the need of a local server stack to generate pages. It can be integrated with a CMS that does require a stack, but at it’s core level does not require this.
When you download Bootstrap 4 you will get some CSS files, some Javascript files and several .map files. The .map files are a file that help your browser identify an item in the .min file and tell you where it is located in the non minified CSS or JS file. Therefore if you are not using the .min files (which you don’t have to Actually my javascript isnt working without the .min files so nevermind…) you can also delete the .map files.
Installation: Simply drag the CSS and Javascript files into the root of your project and then reference them in the html files. Just like you would reference a CSS or JS file (because that is what you are doing.)
NOTE ON INSTALLATION While you can use Bootstrap with just the CSS file, this will disable many of the features such as the drop down menu. You have to download, install and reference the dependent files, or simply link to a CDN of those files. For example Bootstrap 4 requires JS, popper.js and jQuery.
You can can download those files and include them manually into your site files and reference them. You can also install them via the command line with npm. See current bootstrap homepage for installation instructions.
At it’s core Bootstrap is just a bunch of pre-written CSS classes that you can reference. Browse the examples in the documentation.
Some things to remember:
Grid System
- 12 column grid system
- all items must be in rows
- to prevent things from going full width use the wrapper class
- you can put rows inside of rows
Styling
- you can overwrite the default CSS styling by specifying the same class in another CSS file that is referenced AFTER the default bootstrap CSS file. Just like a child theme in wordpress! But the 2nd CSS file with customization must be referenced AFTER the first.
Navbars
To make sure that menu items are included in the mobile hamburger menu, you have to reference them with an ID. See samples.
Edit 7/11/2020 There is now a whole post on Bootstrap 4 Navbars: Bootstrap 4 Navbars: Understanding Mobile Collapse
Comments
Recent Work
Basalt
basalt.softwareFree desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.
BidBear
bidbear.ioBidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.