<commit_before>---
layout: post
title: "Bootstrap 4 Cards"
date: 2016-05-04
---

###Cards

***

I've put together some cards using bootstrap 4 that link to my projects on github. The [documentation](http://v4-alpha.getbootstrap.com/components/card/) was really easy to get through and with some little CSS translate effects they move really nicely on hover.

Each card has html like the following example:

*HTML:
```html
    <div class="card card-block projectCard">
      <h4 class="card-title text-thin">Responsive Portfilio</h4>
      <p class="card-text">Portfolio developed for responsiveness & mobile first design.<br>Features a JavaScript parallax background effect & responsive Slick carousel.<br>Technologies used: Bootstrap, CSS3, Slick</p>
      <a href="http://kfmahre.github.io/Portfolio/" type="button" class="card-link btn btn-primary-outline">Live Version</a>
      <footer>
        <small class="text-muted">
          <a href="https://github.com/kfmahre/Portfolio" class="card-link text-thin">https://github.com/kfmahre/Portfolio</a>
        </small>
      </footer>
    </div>
```

If you're going to try this remember as per the documentation to wrap the cards in a:
```html
<div class="card-columns text-xs-center">
```
followed by a closing div tag, of course.

*CSS:
```css
.card-text {
  font-size: .9em;<commit_msg>more markdown fixes<commit_after>---
layout: post
title: "Bootstrap 4 Cards"
date: 2016-05-04
---

###Cards###

***

I've put together some cards using bootstrap 4 that link to my projects on github. The [documentation](http://v4-alpha.getbootstrap.com/components/card/) was really easy to get through and with some little CSS translate effects they move really nicely on hover.

Each card has html like the following example:

*HTML:

```
    <div class="card card-block projectCard">
      <h4 class="card-title text-thin">Responsive Portfilio</h4>
      <p class="card-text">Portfolio developed for responsiveness & mobile first design.<br>Features a JavaScript parallax background effect & responsive Slick carousel.<br>Technologies used: Bootstrap, CSS3, Slick</p>
      <a href="http://kfmahre.github.io/Portfolio/" type="button" class="card-link btn btn-primary-outline">Live Version</a>
      <footer>
        <small class="text-muted">
          <a href="https://github.com/kfmahre/Portfolio" class="card-link text-thin">https://github.com/kfmahre/Portfolio</a>
        </small>
      </footer>
    </div>
```

If you're going to try this remember as per the documentation to wrap the cards in a:
```
<div class="card-columns text-xs-center">
```
followed by a closing div tag, of course.

*CSS:
```
.card-text {
  font-size: .9em;
{'fraction_non_alphanumeric': 0.13465124953375607, 'fraction_numerical': 0.011189854531891086, 'mean_word_length': 3.8411552346570397, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6595619', 'n_tokens_mistral': 862, 'n_tokens_neox': 815, 'n_words': 268}