Please wait...
Paragraph I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
"I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
- Noaa
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:
<button class="btn btn-default">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-neutral">Neutral</button>
Buttons come in all needed sizes:
<button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary">Normal</button> <button class="btn btn-primary btn-sm">Small</button>
We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or plain simple buttons. Let's see some examples:
<button class="btn btn-primary">Default</button> <button class="btn btn-primary round">Round</button> <button class="btn btn-primary"><i class="zmdi zmdi-favorite-outline"></i> With Icon</button> <button class="btn btn-primary"><i class="zmdi zmdi-favorite-outline"></i></button> <button class="btn btn-simple">Simple</button>
To use the custom checkboxes, you don't need to import any separate Javascript file, just add the below code:
<label class="c_checkbox"> <input type="checkbox"> <span class="checkmark"></span> <span class="ml-2">Unchecked</span> </label> <label class="c_checkbox"> <input type="checkbox" checked=""> <span class="checkmark"></span> <span class="ml-2">Checked</span> </label> <label class="c_checkbox"> <input type="checkbox" disabled=""> <span class="checkmark"></span> <span class="ml-2">Disabled unchecked</span> </label> <label class="c_checkbox"> <input type="checkbox" checked="" disabled=""> <span class="checkmark"></span> <span class="ml-2">Disabled checked</span> </label>
To use the custom radio buttons, you don't need to import any separate Javascript file, just add the below code:
<label class="c_radio"> <input type="radio" name="radio1" id="radio1" value="option1"> <span class="checkmark"></span> <span class="ml-2">Radio is off</span> </label> <label class="c_radio"> <input type="radio" name="radio1" id="radio2" value="option2" checked=""> <span class="checkmark"></span> <span class="ml-2">Radio is on</span> </label> <label class="c_radio"> <input type="radio" name="radio3" id="radio3" value="option3" disabled=""> <span class="checkmark"></span> <span class="ml-2">Disabled radio is off</span> </label> <label class="c_radio"> <input type="radio" name="radio4" id="radio4" value="option4" checked="" disabled=""> <span class="checkmark"></span> <span class="ml-2">Disabled radio is on</span> </label>
We restyled the Bootstrap input to give it a more flat, minimal look. You can use them with regular labels, states or input groups.
<div class="col-sm-4"> <div class="form-group"> <input type="text" value="" placeholder="Regular" class="form-control"> </div> </div> <div class="col-sm-4"> <div class="form-group has-success"> <input type="text" value="Success" class="form-control form-control-success"> </div> </div> <div class="col-sm-4"> <div class="form-group has-danger"> <input type="email" value="Error Input" class="form-control form-control-danger"> </div> </div> <div class="col-sm-4"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="zmdi zmdi-account-circle"></i></span> </div> <input type="text" class="form-control" placeholder="Left Font Icon"> </div> </div> <div class="col-sm-4"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Right Font Icon"> <div class="input-group-append"> <span class="input-group-text"><i class="zmdi zmdi-account"></i></span> </div> </div> </div>
The textarea has a new style, so it looks similar to all other inputs.
<textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>
We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation like
.nav-pills-primary
,
.nav-pills-info
,
.nav-pills-success
,
.nav-pills-warning
,
.nav-pills-danger
<ul class="nav nav-pills nav-pills-primary mb-3" role="tablist"> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#active" role="tablist"> <i class="zmdi zmdi-favorite"></i> </a> </li> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#link" role="tablist"> <i class="zmdi zmdi-library"></i> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tablist"> <i class="zmdi zmdi-lamp"></i> </a> </li> <li class="nav-item"> <a class="nav-link disabled" data-toggle="tab" href="#disabled" role="tablist"> <i class="zmdi zmdi-lock"></i> </a> </li> </ul>
The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color classes to offer more customisation like
.pagination-info
,
.pagination-success
,
.pagination-warning
,
.pagination-danger
,
.pagination-primary
.
//Pagination simple <ul class="pagination pagination-primary"> <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li> </ul> //Pagination full-width <div class="justify-content-center"> <ul class="pagination pagination-primary"> <li class="page-item arrow-margin-left"> <a class="page-link" href="javascript:void(0);" aria-label="Previous"> <span aria-hidden="true"><i class="zmdi zmdi-chevron-left" aria-hidden="true"></i></span> </a> </li> <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li> <li class="page-item active"><a class="page-link" href="javascript:void(0);">3</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li> <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li> <li class="page-item arrow-margin-right"> <a class="page-link" href="javascript:void(0);" aria-label="Next"> <span aria-hidden="true"><i class="zmdi zmdi-chevron-right" aria-hidden="true"></i></span> </a> </li> </ul> </div>
The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific color but you can add some colors for the background lines using the next classes
.progress-primary
,
.progress-info
,
.progress-success
,
.progress-warning
,
.progress-danger
,
<div class="mb-3"> <span class="progress-badge">Progress small</span> <div class="progress sm"> <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"> <span class="progress-value">25%</span> </div> </div> </div> <div class="mb-3"> <span class="progress-badge">Progress Default</span> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 38%;"> <span class="progress-value">38%</span> </div> </div> </div> <div class="mb-3"> <span class="progress-badge">Progress large Default</span> <div class="progress lg"> <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"> <span class="progress-value">25%</span> </div> </div> </div>
We restyled the default options for labels and we added the filled class, that can be used in any combination.
Default Primary Success Info Warning Danger<span class="badge badge-secondary">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Success</span> <span class="badge badge-info">Info</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-danger">Danger</span>
The new notifications are looking fresh and clean. They go great with the navbar. For these notifications examples we used the
.container-fluid
class, so they will be fluid, please use the class
.container
when you use them outside of the
.wrapper
so they will be alignd with the general page container
<div class="alert alert-success" role="alert"> <div class="alert-icon"> <i class="zmdi zmdi-thumb-up"></i> </div> <strong>Well done!</strong> You successfully read this important alert message. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="zmdi zmdi-close"></i></span> </button> </div> <div class="alert alert-info" role="alert"> <div class="alert-icon"> <i class="zmdi zmdi-alert-circle-o"></i> </div> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="zmdi zmdi-close"></i></span> </button> </div> <div class="alert alert-warning" role="alert"> <div class="alert-icon"> <i class="zmdi zmdi-notifications"></i> </div> <strong>Warning!</strong> Better check yourself, you're not looking too good. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="zmdi zmdi-close"></i></span> </button> </div> <div class="alert alert-danger" role="alert"> <div class="alert-icon"> <i class="zmdi zmdi-block"></i> </div> <strong>Oh snap!</strong> Change a few things up and try submitting again. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="zmdi zmdi-close"></i></span> </button> </div>
Image
Circle Image
Raised
Circle Raised