Page Title
The Idaho 3.0 DIY template uses Bootstrap 4.3. View the docs at https://getbootstrap.com/docs/4.3.
Major changes between Bootstrap 3 & 4 cheatsheet
Need assistance? See https://webmaster.idaho.gov/ for resources and contact information.
Button Examples
Card Examples
Important Info Title
Pizza is the best food in the entire world.
Important Info Title 2
Tacos are also great.
Important Info Title 3
Coffee is amazing.
Accordion (Collapse) Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus, libero a venenatis faucibus, lacus lectus tempus ipsum, id porttitor massa tortor eu metus. Proin dapibus malesuada est, a vulputate risus porttitor a. Nam tincidunt, justo vitae pretium euismod, augue tortor pulvinar urna, ut porttitor eros tortor varius nibh. Nulla facilisi. Praesent a blandit dui, ut consequat libero. Praesent eu luctus nisl. Aliquam ex nisi, posuere et vehicula quis, dictum sit amet augue. Donec tincidunt sodales sem. Quisque aliquam et magna vel ullamcorper. Suspendisse potenti. Fusce a massa a quam pharetra bibendum. Praesent massa lorem, maximus tincidunt sapien egestas, posuere feugiat massa. Maecenas ac bibendum diam. Donec quis ornare ipsum. Ut sit amet augue arcu.
Icon Examples
We suggest utilizing Font Awesome Icons because Bootstrap 4 doesn’t include an icon library by default.
Common Icons to Use
- PDF - <i class="fas fa-file-pdf"></i>
- Download - <i class="fas fa-file-download"></i>
- Excel - <i class="fas fa-file-excel"></i>
- Info - <i class="fas fa-info-circle"></i>
- Question - <i class="fas fa-question-circle"></i>
Icon Sizes
The icons can be easily made different sizes by following the instructiosn on https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
Modal Example
Table Example
Tables can utilize the extra width if they have multiple columns that do not fit within the container. To utilize the extra width, use the "container-fluid" class instead of the "container" class as this example shows.
On mobile, the table columns need to stack as the example below shows. Be sure to update the "data-title" variable for each td and th - this is for the mobile stacking of the table. The shorter the column name the better.
| Name | Position | Office | Age | Start Date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 04/25/2011 | $32,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 07/25/2011 | $70,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 01/12/2009 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 03/29/2012 | $43,060 |
| Airi Satou | Accountant | Tokyo | 33 | 11/28/2008 | $62,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 12/02/2012 | $32,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 08/06/2012 | $37,500 |
| Rhonda Davidson | Integration Specialist | Tokyo | 55 | 10/14/2010 | $37,900 |