Building a single page theme with WordPress and Bootstrap
Find examples in the source package in the /docs/examples folder :
Bootstrap Themes, Templates and Starter Kits
These terms are used interchangeably and generally describe a pre-configured bootstrap CSS and HTML files available for you to download. The Themes/Templates/Kits can include modified CSS, HTML templates, or both.
Flat UI Provides a standard bootstrap CSS file with custom colours and icons. The Kit provides a revised colour palette and typography over the default bootstrap theme but no HTML layouts.
Start Bootstrap Provids a number of A bare bones HTML layouts with a grid setup in a particular way. Uses the standard Bootstrap CSS unchanged.
Bootstrap Customisers / Theme Generators
Customisers are online User interfaces for modifying a basic bootstrap theme. You can then generate a customised version of the standard bootstrap CSS with your very own settings.
customising-bootstrap Smashing Magazine tutorial provides a guide.
Desktop Apps and Editors
Bootstrap Studio is a Desktop app that allows you to create bootstrap layouts using a drag and drop interface.
See Koala SASS compiler also..
Bootstrap Cheat Sheets
Bootstrap cheat sheet downloadable PDF
Bootstrap Grid Basics
Specify the number of columns you want using the following structure :
.col-[collapse breakpoint type] – [number of columns]
collapse breakpoint types allow you to specify the breakpoint at which your columns will collapse i.e. start stacking on top of each other.
xs: Grid never collapses (or collapses at less than 544 – not sure!)
sm : Grid Collapses when screen width is less than 768px
md : Grid Collapses when screen width is less than 992px
lg : Grid Collapses when screen width is less than 1200px
xl : Grid Always collapses.
.co-md-4 gives you four boxes that will stay horizontally aligned until the screen size is reduced to less than 992px. Then, the boxes will stack underneath each other.
Bootstrap Grid Reference : getbootsrap.com
Bootstrap Grid Nesting : best practices for nesting grids on getbootstap.com
Bootstrap Grid Explained : tutorial explaining grid classes on w3schools.com
Understanding Bootstrap’s Grid System : tutorial explaining grid classes on sitepoint.com
# Media Query Break Points on scotch.io
# Different Grid Columns at Different Device Sizes on scotch.io describes how you can get a whole extra level of control out of your grid breakpoints.
in addition to the grid responsiveness above special classes can be applied to show and hide content.
Responsive utilities : list of classes that will hide / show at breakpoints on get bootstrap.com
Bootstrap does not have built in functionality to responsively rescale text. You have to roll your own :
Bootstrap and SASS
Bootstrap employs SASS to make it easier to modify styles quickly. SASS is the same as CSS – with extra commands that make it easier to handle and edit giant CSS stacks like bootstrap. Browsers don’t know what the hell SASS is, so you need to convert SASS to CSS before your browser gets it. This is done with a “Precomiler” app that translates the code. This does not happen ‘on the fly’ like PHP – there is no “SASS Server” on your web server. You have to do this step manually. It’s like saving a PSD file as a JPG before using the image in your web page.
sass-lang.com Official SASS site.
Converting SASS to CSS is known as ‘precompiling’ or sometimes ‘transpiling’ and is achieved using a UNIX command line script (preferred by developers) , or a Desktop Application (Designers) or an online tool (good for testing every now and again).
Koala Desktop App
Bootstrap and WordPress Navigation
Bootstrap can be used with wordpress, but needs a customised piece of code to get the bootstrap navigation bar playing nicely with the wordpress menu system.
wp-bootstrap-navwalker Source code
A CDN (content delivery network) provides a public url for serving bootstrap css and js files, so you don’t have to. Great as it reduces bandwidth from your host AND faster as your client will download bootstrap from the CDN in parallel (simultaneously) with the HTML and assets from your host. CDN FTW!