NXTBoard Styleguide
This is a styleguide for NXTBoard branded elements built from Bootstrap 4
This is a styleguide for NXTBoard branded elements built from Bootstrap 4
p - Transforming the boards of tomorrow. Today.
.text-primary - Transforming the boards of tomorrow. Today.
.text-nxtboard-lt - Transforming the boards of tomorrow. Today.
.lead - Transforming the boards of tomorrow. Today.
.text-lg - Transforming the boards of tomorrow. Today.
.text-md - Transforming the boards of tomorrow. Today.
a- Links are the essence of life and the raison d'etre of UI design. Live it, love it.
.btn- Buttons are the second essence of life and the raison d'etre of UI design. Live it, love it.
.btn-group- Wrap a series of buttons in a group. Works with input radio buttons too.
.form-group- for grouping things. Individual form controls automatically receive some global styling. All textual
<input>,
<textarea>, and
<select>elements with
.form-controlare set to
width: 100%;by default. Wrap labels and controls in .form-group for optimum spacing.
.form-inline- Great for forms that only occupy one line for whatever reason.
.input-group- Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use
.input-groupwith an
.input-group-addonto prepend or append elements to a single
.form-control.
.list-group- List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
.list-groupwith
span.badge- Add the badges component to any list group item and it will automatically be positioned on the right.
.panel- By default, all the .panel does is apply some basic border and padding to contain some content.
.panel-heading- Easily add a heading container to your panel with
.panel-heading.
.nav-tabs- Note that it requires a
.navbase class.
.nav-pills- Note that it requires a
.navbase class.
.modal- Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
.alert- Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
.pagination- Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
.badge- Used for labelling things that need badges.
.breadcrumb- Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through
:beforeand
content.
Reprehenderit fugiat in nostrud eiusmod veniam ad consequat ad ex excepteur officia ut laborum ullamco ut labore nisi sed.