Bootstrap, CSS, and Icons in this Site
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:
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 the Grid system to make the proper columns.
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
active states, as well as center-page alignment. See where I implement Bootstrap’s pagination bar here. For the icons, I use Feather Icons.
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, as well as the
Primary color scheme shown here. 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 here, and here is the overriding CSS for my navbar.
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 (read more about responsive tables here). The tables I’ve selected to use is described in ‘Hoverable Rows’. I use the tables in this Markdown file and in this Markdown file. Because it’s Markdown, it may be more helpful to view the ‘Raw’ code.
This site uses Bootstrap’s buttons for all of it’s button functionality (unless the button is an icon). Here’s a button that I’ve made that uses Bootstrap’s design but includes a Feather Icon. I prefer the look of the Outline buttons more than the solid ones, but that’s just my preference.
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. All of my custom CSS is in this directory.
The pieces I’m overriding are:
- Preformatted monospace (like code snippets)
- Links and buttons
- Navbar settings and colors
- Other site settings
- Font sizes and styles
- Settings for the
The site uses Feather Icons for all of its pretty icons, including the
- GitHub icon
- LinkedIn icon
- Twitter icon
- Mail send icon
- Forward/backward icons
- Navbar X and bar icons
- Feed/RSS icon
Icons are called like this:
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>
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>
See them in action here.
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.
EDIT: Since writing this blog post, I’ve moved my site away from Feather Icons. I now use a mixture of Feather Icons and Bootstrap Icons, and all are downloaded specifically to this project and called via an