Bootstrap, CSS, and Icons in this Site
Bootstrap
This site uses Bootstrap for most of its CSS. I have Bootstrap to attribute to the site looking so nice. Here are the “elements” that I’m using from Bootstrap:
1. Layout
My site is responsive because of Bootstrap’s responsive layout option! This is what determines the break-points to change the section margins and width size. I use Bootstrap’s Grid system to make the proper columns.
2. Pagination
To make the pretty pagination bar appear on the blog pages, I use Bootstrap’s built-in pagination to create the CSS. Specifically, I use disabled and active states, as well as center-page alignment. For the icons, I use Feather Icons and Bootstrap Icons. For more information on the icons and pagination, look at my GitHub gist.
3. Navbar
The responsive navbar utilized in this site is from Bootstrap’s built-in navbar option. Specifically, it uses the navbar which is fully responsive on smaller screens. I do add some custom icons to the drop-down section of the responsive navbar, as well as customizing the color and the font-styles. The navbar is in action throughout this entire site, and example code for it can be found in this GitHub gist.
4. Tables
For my tables on this site, I use Bootstrap’s built-in tables, which are responsive, as long as you use class: "table-responsive" at the top. The tables I’ve selected to use is described in ‘Hoverable Rows’. Some examples of places where I use the tables are in my Theatre page and in this blog post. Bootstrap has some great examples of what the HTML code for the tables should look like.
5. Buttons
This site uses Bootstrap’s buttons for all of its button functionality (unless the button is an icon). Here’s an example button that uses Bootstrap’s design but includes a Feather Icon:
<div class="text-center" style="margin-bottom: 1rem;">
<a href="https://url-goes-here.com" class="btn btn-md btn-outline-secondary">
<i data-feather="link"></i>
Link to a random URL
</a>
</div>
I prefer the look of the Outline buttons more than the solid ones, but that’s just my preference.
CSS
Using Bootstrap for the entire layout of this website, as well as for specific elements means there’s so much less CSS in this repository. I started with over 600 lines of CSS, and now I have about 220 lines. But, there are still some pieces that I’ve chosen to override from Bootstrap’s defaults. The pieces I’m actively overriding are:
- Blockquotes
- Preformatted monospace (like code snippets)
- Links and buttons
- Navbar settings and colors
- Other site settings
- Font sizes and styles
- Settings for the
main-contentandbody - Footer
- Tables
Icons
The site uses a mixture of Feather Icons and Bootstrap Icons for all of its pretty icons, including the:
- GitHub icon
- LinkedIn icon
- Twitter icon
- Forward/backward icons
- Navbar X and bar icons
- Feed/RSS icon
Feather Icons are called like this:
<i data-feather="twitter"></i>
To make the icon into a button, you can write it in an a href tag:
<a href="https://twitter.com/emmahsax" class="link-icon">
<i data-feather="twitter"></i>
</a>
The link-icon class is something that I’ve created with common link-icon settings. Read more about my custom CSS in the secton above.
Lastly, as long as these two lines are at the bottom of the file, the icons appear magically!
<script src="https://unpkg.com/feather-icons"></script>
<script>feather.replace()</script>
Alternatively, you can download the SVGs of the icon and save them to the repository, and then call them like this:
<img class="icon" src="/assets/images/icons/icon.svg" alt="Icon">
Conclusion
Now that you’ve seen how Bootstrap and Feather Icons have improved my website, it’s your turn! Check out my blog post here for more information on how to get Bootstrap started on your site.
Here are the tools I use and have mentioned:
