Bootstrap, CSS, and Icons in this Site
2019-12-29 00:00:00 -0600

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:

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 the Grid system to make the proper columns.

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. See where I implement Bootstrap’s pagination bar here. For the icons, I use Feather Icons.

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, 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.

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 (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.

Buttons

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.

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. All of my custom CSS is in this directory.

The pieces I’m 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-content and body
    • Footer

Icons

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:

<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>

See them in action here.

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.