General ui preview of ui elements

Bridle

A clean and responsive react bootstrap 4 admin dashboard template. It is a template that contains many different professional and reusable responsive components in different variations. With so many excellent features highlighted, it makes a perfect admin dashboard for projects. These projects can range from small, medium to large sizes of projects. If you have personal projects, this is a multipurpose feature that can be integrated in different types of business projects.Find this as an easy and creative way of developing an admin back-end for the next projects you will have.


Info / DownloadDemo

Lists

All lists—, , and —have their removed and a . Nested lists have no .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

For simpler styling, clear hierarchy, and better spacing, description lists have updated s. s reset to and add . s are bolded.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Matrix

This theme has plentiful package consisting of two different dashboard presentations, as much as 20 integrated plugins to make your life easier and your design experience smoother and fluid, tons of handy widgets and awesome templates, powerful graphing capacities that make analytical work and data handling or reporting a simple, streamlined task, and much more under the hood. In addition, professional quality charts, interactive graphs, colorful widgets and functional buttons, sidebars, headers and more await you within Matrix Admin. Cutting edge HTML5, CSS3 and Bootstrap capabilities make Matrix Admin backends completely cross-compatible with all devices and browsers, mobile-friendly and extremely lightweight and fast-loading right out of the box. Boxed and fullwidth layout capabilities are but a click away, as are a myriad more advanced choices and styles. Try Matrix Admin now!

Available styles

Change the style of s component with modifiers and utilities. Mix and match as needed, or build your own.

Horizontal alignment

Change the horizontal alignment of your nav with . By default, navs are left-aligned, but you can easily change them to center or right aligned.

Centered with :

Right-aligned with :

Vertical

Stack your navigation by changing the flex item direction with the utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., ).

As always, vertical navigation is possible without s, too.

Tabs

Takes the basic nav from above and adds the class to generate a tabbed interface. Use them to create tabbable regions with our .

Fill and justify

Force your ’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your s, use . Notice that all horizontal space is occupied, but not every nav item has the same width.

When using a -based navigation, you can safely omit as only is required for styling elements.

For equal-width elements, use . All horizontal space will be occupied by nav links, but unlike the above, every nav item will be the same width.

Similar to the example using a -based navigation.

Classes

Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., ) and extraneous parent classes (e.g., ) that make styles too specific to easily override.

As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, and . We use for all the common styles like , , and . We then use modifiers like to add the color, background-color, border-color, etc.

Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.

Bootstrap Accordion & Carousel

Collapsible Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Layout

The layout consists of four major parts:

  • Wrapper . A div that wraps the whole site.
  • Main Header . Contains the logo and navbar.
  • Sidebar . Contains the user panel and sidebar menu.
  • Content . Contains the page header and content.

Tip!


The starter page is a good place to start building your app if you’d like to start from scratch.

Layout Options

AdminLTE 2.0 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.

  • Fixed: use the class to get a fixed header and sidebar.
  • Collapsed Sidebar: use the class to have a collapsed sidebar upon loading.
  • Boxed Layout: use the class to get a boxed layout that stretches only to 1250px.
  • Top Navigation use the class to remove the sidebar and have your links at the top navbar.

Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.

Skins can be found in the dist/css/skins folder. Choose the skin file that you want and then add the appropriate class to the body tag to change the template’s appearance. Here is the list of available skins:

Sigma

Found in three different layouts, Sigma is indeed a responsive react bootstrap template to ever consider in mind. It has its 8 navbar, left sidebar color styles and top navigation, 100+pages, 500+components and widgets in layout. There’s so much more to appreciate about it such as the reusable and custom made components and widgets. These will help you prior to your next application.

It is impressive in a sense that it has its good features of 1500+ font icons, 100+pages, 500+componenst and widgets, three layouts of the collapsed sidebar, top navigation, and default sidebar. There is also the hot module type of reloading that promises fast development and coding.

With its compatibility to Bootstrap 4.x and ReactJS, you will more like it for your next project.

Info / DownloadDemo

Forms

Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:

  • s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
  • s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
  • s are set to to allow to be applied.
  • s, s, s, and s are mostly addressed by Normalize, but Reboot removes their and sets , too.
  • s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.
  • s and button elements have when .

These changes, and more, are demonstrated below.

Purple

Designed based on the Bootstrap framework, the free admin template, Purple is designed to look simple and elegant. The simple Bootstrap admin template contains multiple data representation options. This will allow customers to represent data in a simple but attractive way. Purple also has a fine selection of plenty of useful components, forms, icons, and more. 

In addition, Purple has 5 well-designed sample page layouts. The template comes with separate pages for Login, Register, Error 404, and more. Everything you will need to design a killer web app is available with the Purple Bootstrap admin template. If you wish to make use of more features, you can upgrade to the premium version of the template. 

Download Preview  Get Pro

Навигатор

Как же настройки попадают в лейаут? Очень просто. Во время своей инициализации, YIMP проверяет наличие свойства у текущего контроллера. Если это свойство доступно для чтения и является навигатором (), оно используется для вывода соответствующей информации. Навигатор включает в себя свойства, соответствующие элементам лейаута, полный список которых проще посмотреть в API документации.

В приложении рекомендуется создать свой навигатор и определить в нем меню, которые не будут зависеть от текущего действия (верхнее и левое). После этого, во всех контроллерах нужно создать свойство и определить его как навигатор (можно руками, можно наследованием, а можно трейтом). Если нужно, можно определить и несколько навигаторов.

Такой подход исключает прямую зависимость между YIMP и контроллером. Все взаимодействие осуществляется через один объект, реализация которого контролируется разработчиком. То есть это тот самый Dependency Inversion Principle из SOLID или Low Coupling из GRASP.

Идеологически правильным было бы использовать интерфейсы, причем как для контроллера, так и для навигатора. Но и тут я решил пойти по самому простому пути и не загромождать систему. В конце-концов, в DIP сказано не об интерфейсах, а об абстракциях. И в данном случае, абстракция — это соглашение о наличии в определенном классе свойства определенного типа. Что думаете?

Отсутствие прямой зависимости между YIMP и контроллером становится важным, когда в системе появляются модули, ничего не знающие про YIMP. Или наоборот — модули, написанные под YIMP устанавливаются в систему, которая YIMP не использует.

В первом случае YIMP не увидит в контроллере свойства . Ошибки не будет, но с экрана пропадут ваши меню, а в качестве заголовка будет использовано ID действия. Как быть? Очень просто — если YIMP не сможет взять навигатор из контроллера, он создаст его через DI-контейнер по псевдониму . Используя этот псевдоним, вы можете зарегистрировать собственный дефолтный навигатор, например указав в настройках приложения:

Во втором случае навигатор в контроллере будет, но некому будет его прочитать. На этот случай рекомендуется написать в модуле обертку для представлений, которая будет адаптировать навигатор из текущего контроллера к формату, принятому в Yii. То есть выводить в основной области, и хлебные крошки передавать через параметры , а правое меню выводить в виде кнопок.

Eract

Based on Facebook webpack and create-react-app cli and ReactJS, Eract is the right react bootstrap template to ever consider. This comes with built-in support for the css pre-processor and SASS pre-processor. The difference it has is that it does not use any flux or redux implementation. That is why if you are a beginner, you may have this as your best choice.

Its excellent features include ghost-like navigation system, cross-browser support, high-resolution support, documentation included and quick start guide, components for the modular structure, react icons that support github, fontawesome, and material icons. It is also specifically written in a form of ES6. One more thing is that it is built with the components necessary in mind for the modular structure.

Info / DownloadDemo

EasyDev

For a modern react bootstrap template, EasyDev is just right for you to use. This is based on Bootstrap 4 Framework and React Components. You’ll love it more because of it using the best practices and modern technologies. You can easily work with this product.

This is by far the most convenient of all react bootstrap templates. This comes with clean code, react components, and completely detailed documentation. Thus, you will be able to build projects easily and conveniently. Use it when you need to do some mobile or web applications, sports, analytics, and e-commerce.

Make use of the customization feature of EasyDev to suit your project. There are also breaking changes in the package that include react-dnd, redux-form & react-redux, react-big-calendar, material-ui, react-il8next, react-draft-wysiwyg, react-syntax-highlighter, eslint-config-react-app and eslint-config-airbnb.

Info / DownloadDemo

Admiria

Find this next-generation bootstrap template in Bootstrap 4 a good option. This is because of the fact that it comes with customizable components, clean user interface, and widgets in different frameworks such as Node Js, Redux, AJAX, and PHP. What more to like is the collection of reusable UI plug-ins and components. Its responsive layout is designed for tablet, mobile device, and desktop use. In addition to that, it has a flat and clean design while it reacts with Node, Redux, Ajax, and PHP versions. It’s something you would want to use for its SASS support, register, log in and error pages.

Info / DownloadDemo

Scripts included:

  • Bootstrap
  • Font Awesome
  • jQuery-Autocomplete
  • FullCalendar
  • Charts.js
  • Bootstrap Colorpicker
  • Cropper
  • dataTables
  • Date Range Picker for Bootstrap
  • Dropzone
  • easyPieChart
  • ECharts
  • bootstrap-wysiwyg
  • Flot — Javascript plotting library for jQuery.
  • gauge.js
  • iCheck
  • jquery.inputmask plugin
  • Ion.RangeSlider
  • jQuery
  • jVectorMap
  • moment.js
  • Morris.js — pretty time-series line graphs
  • PNotify — Awesome JavaScript notifications
  • NProgress
  • Pace
  • Parsley
  • bootstrap-progressbar
  • select2
  • Sidebar Transitions — simple off-canvas navigations
  • Skycons — canvas based wather icons
  • jQuery Sparklines plugin
  • switchery — Turns HTML checkbox inputs into beautiful iOS style switches
  • jQuery Tags Input Plugin
  • Autosize — resizes text area to fit text
  • validator — HTML from validator using jQuery
  • jQuery Smart Wizard

Base nav


Navigation available in Bootstrap share general markup and styles, from the base class to the active and disabled states. Swap modifier classes to switch between each style.

The base component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

The base component does not include any state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.

Classes are used throughout, so your markup can be super flexible. Use s like above, if the order of your items is important, or roll your own with a element. Because the uses , the nav links behave the same as nav items would, but without the extra markup.

Mate

A clean, organized, and modern react boostrap template, Mate is perfect for your project and business needs. This will do its job in whatever application you would want to come up with. This has an excellent tool that can create features-packed admin and can cover all of the segments of your business.

With Mate, you can expect to get a comfortable and stable experience. It is also one-hundred percent ready as it works smoothly and conveniently on devices. These also include tablets, mobile phones, and desktops. You will need this react bootstrap templates to run your mobile project or web project.

Info / DownloadDemo

Monarch (Premium)

Monarch is an elegant and extremely well developed, mature and sophisticated, technologically top of the line and deftly competent, highly accessible and both user and developer-friendly, lightweight and fast-loading. Furthermore, it’s a highly customizable responsive AngularJS and HTML5 Admin website template. resulting in a resourceful and cleverly crafted theme, a platform constructed with the pliable malleability and adaptive modularity of the latest and great web development technologies, founded upon a robust framework coded with W3C-valid, lightweight and efficient HTML5 standards. In conclusion, it offers webmasters and developers a full range of web-based desktop and mobile application development tools and powerful features to assist in crafting sophisticated, dynamic and interactive web applications and modern, dashing websites built around them.

Consequently, the AngularJS brings to the table not only a lively ecosystem of sophisticated functions and libraries that allow for all sorts of modular expansion and addition to a sleek, developer-friendly code, but also amazing, professionally graphically designed front-end user interface templates. Hence, building the end-user experience for your web presentations, tablet and mobile apps or desktop web apps is easier and speedier than ever before, with gorgeous, tasteful results regardless of your UI design experience. As a result, Monarch is natively responsive, compatible with all browsers and platforms on the market. Try Monarch now!

Approach

Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some styles for a simpler baseline and later provide , , and more.

Here are our guidelines and reasons for choosing what to override in Reboot:

  • Update some browser default values to use s instead of s for scalable component spacing.
  • Avoid . Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of is a simpler mental model.
  • For easier scaling across device sizes, block elements should use s for s.
  • Keep declarations of -related properties to a minimum, using whenever possible.

Change log

v2.3.0:

  • Added social widgets (found in the widgets page)
  • Added profile page
  • Fix issue #430 (requires to be added to )
  • Fix issue #578
  • Fix issue #579

v2.2.1:

  • Bug Fixes
  • Removed many statements in css
  • Activate boxWidget automatically when created after the page has loaded
  • Activate sidebar menu treeview links automatically when created after the page has loaded
  • Updated Font Awesome thanks to @Dennis14e
  • Added JSHint to Grunt tasks (Find JS errors)
  • Added CSSLint to Grunt tasks (Find CSS errors)
  • Added Image to Grunt tasks (compress images)
  • Added Clean to Grunt tasks (remove unwanted files like uncompressed images)
  • Updated Bootstrap to 3.3.5

v2.2.0:

  • Bug fixes
  • Updated ChartJS

v2.1.2:

  • Added explicit BoxWidget activation function issue #450
  • Crushed some bugs

v2.1.1:

Fix version error

v2.1.0:

  • Update Ion Icons
  • Added right sidebar
  • Control sidebar has 2 open effects: slide over content and push content
  • Control sidebar converts to always slide over content on small screens
  • Added 6 new light sidebar skins
  • Updated demo menu
  • Added ChartJS preview page
  • Fixed some minor bugs
  • Added light control sidebar skin
  • Added expand on hover option for sidebar mini
  • Added fixed control sidebar layout

v2.0.5:

Fixed issue #288


v2.0.4:

Fixed bower.json to pick up newest release.

v2.0.3

  • Bug fixes
  • Fixed extra page when printing issue #264
  • Updated documentation and fixed links scrolling issue
  • Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
  • Fixed sidebar stretching issue #275
  • Fixed checkbox out of bounds issue in WYSIHTML5 editor.

v2.0.2:

Solved issue with hidden arrow in select inputs.

v2.0.1:

  • Updated README.md
  • Fixed versioning issue in CSS, LESS, and JS
  • Updated box-shadow for boxes
  • Updated docs

v2.0.0:

  • Major layout bug fixes
  • Change in layout mark up
  • Added transitions to the sidebar
  • New skins and modified previous skins
  • Change in color scheme to a more complementing scheme
  • Added footer support
  • Removed pace.js from the main app.js
  • Added support for collapsed sidebar as an initial state (add .sidebar-collapse to the body tag)
  • Added boxed layout (.layout-boxed)
  • Enhanced consistency in padding and margining
  • Updated Bootstrap to 3.3.2
  • Fixed navbar dropdown menu on small screens positioning issues.
  • Updated Ion Icons to 2.0.0
  • Updated FontAwesome to 4.3.0
  • Added ChartJS 1.0.1
  • Removed iCheck dependency
  • Created Dashboard 2.0
  • Created new Chat widget (DirectChat)
  • Added transitions to DirectChat
  • Added contacts pane to DirectChat
  • Changed .right-side to .content-wrapper
  • Changed .navbar-right to .navbar-custom-menu
  • Removed unused files
  • Updated lockscreen style (HTML markup changed!)
  • Updated Login & Registration pages (HTML markup changed!)
  • Updated buttons style.
  • Enhanced border-radius consistency
  • Added mailbox: inbox, read, and compose pages
  • Bootstrap & jQuery are now hosted locally
  • Created documentation.

ver 1.2.0:

  • Fixed the sidebar scroll issue when using the fixed layout.
  • Fixed RequireJS bug. Thanks to StaticSphere.

ver 1.1.0:

  • Added new skin. class: .skin-black

Star Admin Pro

Want a classy and distinct design? Look no further! Star Admin is a premium Bootstrap 4 admin template from BootstrapDash. Fully responsive and highly customizable, it has a very elegant, clean and flat design. With the use of very soft colors, the design is a treat to the eyes.

From buttons to forms, tables, charts, icons, sample pages, etc; it features every component required for a good project. If you are looking into creating admin panels, e-commerce systems, project management, systems, etc., StarAdmin may just be the best fit for you.

Star admin is an easily customizable template with a clean and well-commented code.

Buy Now Preview

Apex React

Apex React is a react bootstrap template that is designed to be highly customizable and friendly. It is built based on Redux, BS 4, and React App. As a developer, you will find this as a convenient dashboard template. This is made with create react app, react components, fully documented and clean code. These will enable you to build high-quality, eye-catching, and high-performance single page applications.

It simply is amazing with its excellent features that are as follow: FREE Lifetime Updates, 6 months of free support, unlimited color options, workable application, feather icons, 100+pages, SASS powered, 200+cards and 2 Dashboard, and Fully responsive layout. 

Info / DownloadDemo

Material

It’s good to know that Material is one of the mobile-ready designed react bootstrap templates. It can simply be adopted in any kind of device. It has material UI kit, web app, powerful layout, multiple themes, high resolution, and material icons. Its lazy loading feature is used when you most need it.

Prior to its solid workflow, it can be used to create and react to an application. Modern HTML5 is clean and is also modern. Its CSS3 with Sass is easily modified with all its variables.

What more, it has its free updates while all future updates are offered for free for buyers. It is simply built with love and it has more surprises in store for you. That is why you need to keep this Material in mind.

Info / DownloadDemo

Max

Highlighted as a responsive and advanced react bootstrap template, Max is just as good as it is built with Bootstrap 4 and React. With almost 100 components found in each layout, it is also surprisingly built with custom made and reusable components and widgets. All these will help you with your React application in the future.

Among its features are as follow: updated Bootstrap 4, No jQuery, 100% React, 8 navbar, left sidebar color variations and top navigation, SASS, and react-app package, and hot module reloading.

Much of what has been added to it include repop notifications, react select, sliders, date picker, recharts, dashboard, vector maps, Google maps, off canvas and top navigation layouts, and more. There are also the color options for left sidebar and navigation bar. That’s why Max is one of the most popular react bootstrap templates out there.

Info / DownloadDemo

Admin BSB – Material Design

AdminBSB Material Design is free, responsive Bootstrap admin template with material design, as the name suggests. It has a colorful, and flashy and well-crafted interface that catches the eye of the user. Some of the many features of AdminBSB are dashboard overview page, various widgets, image gallery, carousel, maps, form, advanced data tables, UI elements, example pages including Sign In and Sign Up pages, forms, changelogs, and more. The template supports all the latest and popular web browsers. Well-Written documentation is provided for you to get started with your project with minimum issues. In case you have any issues you can post it on the GitHub page.

Download Preview


С этим читают