Avalojandro

<!-- buttons -->
<a class="button" href="">Click here!</a>
<a class="button primary">Click here!</a>
<a class="button secondary">Click here!</a>
<a class="button tertiary">Click here!</a>
<a class="button success">Click here!</a>
<a class="button warning">Click here!</a>
<a class="button danger">Click here!</a>
<a class="button dark">Click here!</a>

Avalojandro

    <!-- Text-badge -->
    <h1>Example heading<span>&nbsp;</span><span class="badge">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-primary">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-secondary">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-tertiary">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-success">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-danger">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-warning">New</span></h1>
    <h1>Example heading<span>&nbsp;</span><span class="badge-dark">New</span></h1>

Avalojandro

    <!-- Button-badge -->
    <a class="button" href="">Notifications<span>&nbsp;</span><span class="badge">5</span></a>
    
    <a class="button secondary" href="">Notifications<span>&nbsp;</span><span class="badge-danger">5</span></a>
    <a class="button primary" href="">Notifications<span>&nbsp;</span><span class="badge-dark">5</span></a>

Avalojandro

    <!-- Chips -->
    <a class="chip">Hello!</a>
    <a class="chip primary">Hello!</a>
    <a class="chip secondary">Hello!</a>
    <a class="chip tertiary">Hello!</a>
    <a class="chip warning">Hello!</a>
    <a class="chip success">Hello!</a>
    <a class="chip">Hello!</a>

Avalojandro

<!--Breadcrumb-->
<div class="breadcrumb">
    <div class="col-md-12 col-xs-12 col-sm-12 bread">
        <a class="text-secondary" href="">Home</a><span>&nbsp;/&nbsp;</span>
        <a class="text-secondary" href="">Library</a><span>&nbsp;/&nbsp;</span>
        <a class="text-secondary" href="">Data</a>
    </div>
</div>

Avalojandro

    <!-- img and text -->
    <img class="card-img shadow" src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
        <div class="card-content shadow">
            <span class="card-title">Card title</span>
            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing. Unde nam cumque ducimus voluptatum ea ab perspiciatis laborum exercitationem</p>
            <a href="" class="button">Go somewhere</a>
        </div>


        <img class="card-img shadow" src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">

Avalojandro

    <!-- Text Only -->
    <div class="card-content-only">
        This is a card with text only
    </div>    


    <!-- title and text -->
    <div class="card-content-only">
        <span class="card-title">Card title</span><br>
        <span class="card-subtitle">This is a card subtitle</span>

Avalojandro

<!-- Select -->
<select class="select" name="" id="">
  <option value="0">Select car:</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
  <option value="3">Citroen</option>
</select>


<select class="select dark" name="" id="">

Avalojandro

<form action="">  
    <div class="text-form">E-mail adress</div>
    <div>
        <input class="input" type="email"><br>
        <span class="form-advice">We'll never share your information with anyone else</span>
    </div>
    <br>
    <div class="text-form">Password</div>
    <div>
        <input class="input" type="password">

Avalojandro

    <!-- box-input -->
    <div style="display: inline;">
        <span class="form-boxL">@</span>
        <input type="text" style="width: 200px;" class="inputFBL">
    </div>


    <div style="display: inline;">
        <input type="text" style="width: 150px;" class="inputFBR">
        <span class="form-boxR">@example.com</span>