Layout

Choose your preferred layout

layoutlayoutlayout

Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brandbrand

Images

Image Shapes

Change the shape of an image using .roundedor .circlemodifier classes. In addition use .img-thumbnailto give an image 1px border appearance.

img
img
img
img
Aligning images

Align images with the helper float classesor text alignment classes.

imgimg
Align Center

Block-level images can be centered using the .mx-auto margin utilityclass.

img
Cropperjs

An advanced JavaScript image cropper.

Picture
px
px
px
px
deg
Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a figure. Aligning the figure’s caption is easy with text utilities.

A generic square placeholder image with rounded corners in a figure.
Left Aligned Caption
A generic square placeholder image with rounded corners in a figure.
Right Aligned Caption