Flexible Data Table using CSS

See the Pen Flexible Data Table using CSS by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Email</th>
      <th>Street</th>
      <th>Country</th>
      <th>University</th>
      <th>IBAN</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000001</td>
      <td>Lani</td>
      <td>Ovendale</td>
      <td>lovendale0@w3.org</td>
      <td>7850 Old Shore Drive</td>
      <td>United Kingdom</td>
      <td>University of Plymouth</td>
      <td>BG34 MPVP 8782 88EX H1CJ SC</td>
    </tr>
    <tr>
      <td>000002</td>
      <td>Israel</td>
      <td>Tassell</td>
      <td>itassell1@ow.ly</td>
      <td>245 Merchant Circle</td>
      <td>Macedonia</td>
      <td>South East European University</td>
      <td>FR11 4824 2942 41H9 XBHC 46P2 O86</td>
    </tr>
    <tr>
      <td>000003</td>
      <td>Eveleen</td>
      <td>Mercer</td>
      <td>emercer2@ow.ly</td>
      <td>70700 Kipling Pass</td>
      <td>Portugal</td>
      <td>Instituto Superior Novas Profissões - INP</td>
      <td>GR96 7559 456P GUAN WTAJ 3VPB S0P</td>
    </tr>
    <tr>
      <td>000004</td>
      <td>Conn</td>
      <td>Whitley</td>
      <td>cwhitley3@wsj.com</td>
      <td>03 Service Terrace</td>
      <td>Albania</td>
      <td>Epoka University</td>
      <td>LI59 1813 2T7T VKTO 6RKE X</td>
    </tr>
    <tr>
      <td>000005</td>
      <td>Cherye</td>
      <td>Smitheram</td>
      <td>csmitheram4@rambler.ru</td>
      <td>9 Eliot Parkway</td>
      <td>Indonesia</td>
      <td>Universitas Mahasaraswati Denpasar</td>
      <td>BR27 4570 4226 4255 5239 0197 316T J</td>
    </tr>
    <tr>
      <td>000006</td>
      <td>Bunnie</td>
      <td>Sked</td>
      <td>bsked5@51.la</td>
      <td>03418 Ludington Plaza</td>
      <td>Nigeria</td>
      <td>Federal University of Technology, Minna</td>
      <td>ES45 6721 1332 3288 6455 1242</td>
    </tr>
    <tr>
      <td>000007</td>
      <td>Helaine</td>
      <td>Crother</td>
      <td>hcrother6@opera.com</td>
      <td>7932 Sloan Park</td>
      <td>Philippines</td>
      <td>Saint Ferdinand College</td>
      <td>GB50 HFAD 8121 3729 9841 31</td>
    </tr>
    <tr>
      <td>000008</td>
      <td>Tana</td>
      <td>Ajean</td>
      <td>tajean7@sfgate.com</td>
      <td>2 Schurz Junction</td>
      <td>China</td>
      <td>Xi'an University of Electronic Science and Technology</td>
      <td>KZ85 7422 XDPB P2VQ H8SR</td>
    </tr>
    <tr>
      <td>000009</td>
      <td>Sollie</td>
      <td>Greenrde</td>
      <td>sgreenrde8@wikispaces.com</td>
      <td>055 Mockingbird Way</td>
      <td>Russia</td>
      <td>St. Petersburg State Mining Institute (Technical University)</td>
      <td>CH61 6423 9T4W WP0I 8MUK C</td>
    </tr>
    <tr>
      <td>000010</td>
      <td>Vernon</td>
      <td>Millington</td>
      <td>vmillington9@marketwatch.com</td>
      <td>74 David Pass</td>
      <td>Portugal</td>
      <td>Instituto Politécnico de Setúbal</td>
      <td>ES71 2390 0665 1601 8072 4924</td>
    </tr>
  </tbody>
</table>

CSS

* {
  box-sizing: border-box;
}

table {
  display: grid;
  border-collapse: collapse;
  min-width: 100%;
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

thead,
tbody,
tr {
  display: contents;
}

th,
td {
  padding: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  background: #405de6;
  text-align: left;
  font-weight: normal;
  font-size: 1.1rem;
  color: white;
}

th:last-child {
  border: 0;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #808080;
}

tr:nth-child(even) td {
  background: #f8f6ff;
}

Bootstrap Jumbotron Background Cover Image

Add a background image to your jumbotron (hero) in Bootstrap.

See the Pen Bootstrap Jumbotron Background Cover Image by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="jumbotron jumbotron-cover-image">
   <div class="container">
       <h1>Hello, world!</h1>
       <p>...</p>
   </div>
</div>

Add .jumbotron-cover-image CSS class.

CSS

.jumbotron-cover-image {
        position: relative;
        background: #000 url("https://himpfencom.ams3.cdn.digitaloceanspaces.com/codepen-asset-hosting/yeshi-kangrang-276043-unsplash.jpg") center center;
        width: 100%;
        height: 100%;
        background-size: cover;
        color: #fff;
}

You can change the background colour and font colour as needed.

Bootstrap Outline Buttons

See the Pen Bootstrap 4: Outline Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<button type="button" class="btn btn-primary-outline">Primary</button>

<button type="button" class="btn btn-secondary-outline">Secondary</button>

<button type="button" class="btn btn-info-outline">Info</button>

<button type="button" class="btn btn-success-outline">Success</button>

<button type="button" class="btn btn-warning-outline">Warning</button>

<button type="button" class="btn btn-danger-outline">Danger</button>

Create Alerts using CSS

Alerts provide event-based feedback messages for typical user actions.

See the Pen Alerts by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div> 

<div class="alert alert-info" role="alert"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div> 

<div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good.</div> 

<div class="alert alert-error" role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

CSS

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}
.alert-error .alert-link {
  color: #843534;
}