NEXT UI KIT

Components Documentation

Elements description - v1.0.0

Quick start

These themes could not be any easier to install and use. Simply change up the file name of the default bootstrap.css file to custom assets/css/theme/style.css for more info how to do this right see official Bootstrap 4 Docs

CSS

You can use ready-made compiled CSS style files. There are 7 color themes in total. Just replace the theme file in your Bootstrap 4 template in head tag with the selected one:

  • assets/css/theme/style.css
  • assets/css/theme/style-red.css
  • assets/css/theme/style-cyan.css
  • assets/css/theme/style-green.css
  • assets/css/theme/style-navy.css
  • assets/css/theme/style-orange.css
  • assets/css/theme/style-teal.css

Sass

Utilize our source Sass files to take advantage of variables, maps, mixins, and more.

Compile SASS with Gulp file

This package provides the extended styles for Bootstrap 4. This means that all custom scss stylesheets are in the bundle SASS folder, you may provide and mix your own styles with SCSS or CSS. The big thing about this package is all SCSS files are compiled using Gulp

  1. Install NodeJs from NodeJs Official Page.
  2. Install Gulp globally: npm install gulp -g
  3. Open Terminal: cmd
  4. Go to your file project root folder with gulp.js file
  5. Run in terminal: npm install*
  6. Run in terminal: npm start**
  7. Navigate to http://localhost:3000/

*After npm install app upload all NodeJs required modules from NPM to node_modules folder.

**After npm start the app will automatically compiled all scss files to the style.css file and automatically reload after you change main assets/scss/style.sass.


File structure

Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:


your-project/
	├── gulpfile.js
	├── src/
	│   └──assets/
	│		├── fonts/
	│		├── images/
	│		├── scss/
	│		│    ├── components/
	│		│    └── fonts/
	│		│    └── helpers/
	│		│    └── mixins/
	│		│    └── theme/
	│		│    └── style.scss
	│ 		└──css/
	│ 			└──theme/
	│   				└── style.css
	│   				└── style-blue.css
	│   				└── style-red.css
	│   				└── style-cyan.css
	│   				└── style-teal.css
	│   				└── style-navy.css
	│   				└── style-orange.css
	└── node_modules/
			└── bootstrap
				├── js
				└── scss

													

Theme palette

Also all colors available in Bootstrap 4, are available as Sass variables in our scss/_style.scss file. You can give your entire site a full makeover in just a matter of seconds. Use these themes to change up the look of just about every site element including headers, fonts, buttons, labels, forms, dropdowns, images and so much more!


//..scss/_style.scss

$blue:            #1195c6;
$indigo:          #604c8d;
$purple:          #c51555;
$pink:            #e83e8c;
$red:             #eb3a26;
$orange:          #f2672e;
$yellow:          #ffdc04;
$green:           #32b140;
$teal:            #1ca28a;
$cyan:            #17a2b8;
$white:           #FFFFFF;
$secondary:       #6a626d;
$dark:            #101920;

//    Create custom theme 

// Change variable or color (in HEX format only) 
// Example ->   $primary: $blue;    - or ->  $primary: #20c997; 

$primary:           $orange; //primary color	


													
Primary
Success
Warning
Danger
Info
Secondary
Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan
Dark
Light

All elements use default Bootstrap v.4.0. styles. See official Bootstrap 4 docs for more info.
Custom changed elements and additional classes are described below.

Icon Fonts

Material Design Icons

Access over 900 material system icons, available in a variety of sizes and densities, and as a web font.

3d_rotation accessibility account_balance_wallet add_shopping_cart android

Font Awesome Icons

The complete set of 675 icons in Font Awesome 4.7.0 , available in a variety of sizes and densities as a web font.

Extras

Extends with extra styles and components.

Theme gradients

All gradients are available as Sass variables in our assets/scss/theme/custom_gradients.scss file.

<div class="p-3 mb-2 bg-gradient-orange text-white">.bg-gradient-orange</div>
<div class="p-3 mb-2 bg-gradient-green text-white">.bg-gradient-green</div>
<div class="p-3 mb-2 bg-gradient-yellow text-white">.bg-gradient-yellow</div>
<div class="p-3 mb-2 bg-gradient-blue text-white">.bg-gradient-blue</div>
<div class="p-3 mb-2 bg-gradient-violet text-dark">.bg-gradient-violet</div>
<div class="p-3 mb-2 bg-gradient-light-blue text-white">.bg-gradient-light-blue</div>
<div class="p-3 mb-2 bg-gradient-light-orange text-dark">.bg-gradient-light-orange</div>
<div class="p-3 mb-2 bg-gradient-rose text-white">.bg-gradient-rose</div>
<div class="p-3 mb-2 bg-gradient-red text-white">.bg-gradient-red</div>
<div class="p-3 mb-2 bg-gradient-purple text-white">.bg-gradient-purple</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
 
	
//..scss/theme/custom_gradients.scss


/*import gradients mixins from bootstrap source */
@import "../../../../node_modules/bootstrap/scss/mixins/gradients";

.bg-gradient-orange{
  background-color: #fe8c00;
  @include gradient-x($start-color: #f83600, $end-color: #fe8c00, $start-percent: 0%, $end-percent: 100%);
}
...	
	
Orange
Green
Yellow
Blue
Violet
Light blue
Light orange
Rose
Red
Purple
Light
Dark

Directional gradients

<div class="p-3 mb-2 bg-gradient-orange text-white">.bgd-gradient-orange</div>
<div class="p-3 mb-2 bg-gradient-green text-white">.bgd-gradient-green</div>
<div class="p-3 mb-2 bg-gradient-yellow text-white">.bgd-gradient-yellow</div>
<div class="p-3 mb-2 bg-gradient-blue text-white">.bgd-gradient-blue</div>
<div class="p-3 mb-2 bg-gradient-violet text-dark">.bgd-gradient-violet</div>
<div class="p-3 mb-2 bg-gradient-light-blue text-white">.bgd-gradient-light-blue</div>
<div class="p-3 mb-2 bg-gradient-light-orange text-dark">.bgd-gradient-light-orange</div>
<div class="p-3 mb-2 bg-gradient-rose text-white">.bgd-gradient-rose</div>
<div class="p-3 mb-2 bg-gradient-red text-white">.bgd-gradient-red</div>
<div class="p-3 mb-2 bg-gradient-purple text-white">.bgd-gradient-purple</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bgd-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bgd-gradient-dark</div>
 
Orange
Green
Yellow
Blue
Violet
Light blue
Light orange
Rose
Red
Purple
Light
Dark

Gradient buttons

<button type="button" class="btn bg-gradient-orange">.bg-gradient-orange</button>
<button type="button" class="btn bg-gradient-orange">.bg-gradient-orange</button>
<button type="button" class="btn bg-gradient-yellow">.bg-gradient-yellow</button>
<button type="button" class="btn bg-gradient-violet">bg-gradient-violet</button>
<button type="button" class="btn bg-gradient-blue">.bg-gradient-blue</button>
<button type="button" class="btn bg-gradient-rose">.bg-gradient-rose</button>
<button type="button" class="btn bg-gradient-purple">bg-gradient-purple</button>
  

Material design shadows

All shadows are available as Sass variables in our scss/theme/_mdl-shadows.scss file.

.m-shadow-2
.m-shadow-3
.m-shadow-4
.m-shadow-8
.m-shadow-8
.m-shadow-32

Gradient Cards

100%x280

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Mark Otto, Huge Nerd

“They need to stop sleeping on me and get some understanding about this here game I spit!”


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Gradient card

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Animated cards

You can combine classes .card.animated.m-shadow-16

Image overlays

.header-overlay-dark, .header-overlay-primary, .header-overlay-red, .header-overlay-blue

Photo of sunset

Dark overlay image

Here goes sub-title

Photo of sunset

Primary overlay image

Here goes sub-title

Photo of sunset

Red overlay image

Here goes sub-title

Photo of sunset

Blue overlay image

Here goes sub-title

NEXT UI KIT

Beautiful Bootstrap 4 Design UI KIT.

A collection of coded HTML and CSS/SASS elements to help your build your new website. Clean design, fully responsive and based on Bootstrap 4.