Panels

Panel default

div class="panel-default"

Panel primary

div class="panel-primary"

Panel success

div class="panel-success"

Panel info

div class="panel-info"

Panel warning

div class="panel-warning"

Panel danger

div class="panel-danger"

Panel dark

div class="panel-dark"

Panel purple

div class="panel-purple"

Panel pink

div class="panel-pink"

Panel lime

div class="panel-lime"

Panel magenta

div class="panel-magenta"

Panel Brown

div class="panel-brown"

Plain panels

Plain panel

div class="panel-default plain"

Plain primary panel

div class="panel-primary plain"

Plain success panel

div class="panel-success plain"

Plain info panel

div class="panel-info plain"

Plain warning panel

div class="panel-warning plain"

Plain danger panel

div class="panel-danger plain"

Plain dark panel

div class="panel-dark plain"

Plain purple panel

div class="panel-purple plain"

Plain pink panel

div class="panel-pink plain"

Plain lime panel

div class="panel-lime plain"

Plain magenta panel

div class="panel-magenta plain"

Plain brown panel

div class="panel-brown plain"

Other variants

Closed by default

div class="panel-default panel-closed"

With Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With label

HOT
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With badge

2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With progressbar

70%
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With searchfield

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With bars

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With sparkline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With buttons

Save
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With checkbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With select

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

With toggle button

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, impedit, sequi, eum provident molestiae ea libero illum nemo veniam eligendi molestias voluptatibus odio quasi sapiente laborum. Non, id temporibus excepturi.

Vertical scrollbar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quo facilis magni consequuntur iusto reprehenderit impedit inventore expedita dolorum dolore. Consectetur, debitis, accusamus quae omnis aliquid iure beatae nihil esse consequuntur tenetur error blanditiis vero nam aliquam sapiente molestiae iste animi. Voluptatem, molestiae, labore adipisci delectus doloremque sequi laborum cupiditate aut ullam id dolore dolor esse architecto magni a nam incidunt vero rerum voluptate natus deserunt aperiam provident non nostrum saepe expedita perferendis beatae. Ut, placeat, nostrum, dolor veritatis eaque cum assumenda voluptatibus distinctio eum laborum accusantium nobis nam repudiandae animi perspiciatis delectus recusandae labore tempore provident quia ullam aspernatur voluptates excepturi ad quidem! Blanditiis, minus repellendus magnam reprehenderit laboriosam possimus enim dolorum eos debitis iste. Ipsum, explicabo, earum corporis nisi quaerat omnis cupiditate magni error totam accusantium natus numquam quam amet cumque rem voluptatibus atque sapiente beatae doloremque facere? Qui, voluptate suscipit ipsum aperiam enim quae a cumque quas excepturi illum hic ex. Neque, quae officia veritatis iure consequuntur ipsa magnam repudiandae dignissimos architecto rerum quis ad adipisci. Officia, rerum, omnis ab beatae praesentium placeat temporibus quaerat aut porro ratione? Dolores, molestias, libero, officiis deleniti impedit explicabo quis consectetur modi reprehenderit ullam fugit aliquid. Iusto incidunt minima optio neque.

Horizontal scrollbar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quo facilis magni consequuntur iusto reprehenderit impedit inventore expedita dolorum dolore. Consectetur, debitis, accusamus quae omnis aliquid iure beatae nihil esse consequuntur tenetur error blanditiis vero nam aliquam sapiente molestiae iste animi. Voluptatem, molestiae, labore adipisci delectus doloremque sequi laborum cupiditate aut ullam id dolore dolor esse architecto magni a nam incidunt vero rerum voluptate natus deserunt aperiam provident non nostrum saepe expedita perferendis beatae. Ut, placeat, nostrum, dolor veritatis eaque cum assumenda voluptatibus distinctio eum laborum accusantium nobis nam repudiandae animi perspiciatis delectus recusandae labore tempore provident quia ullam aspernatur voluptates excepturi ad quidem! Blanditiis, minus repellendus magnam reprehenderit laboriosam possimus enim dolorum eos debitis iste. Ipsum, explicabo, earum corporis nisi quaerat omnis cupiditate magni error totam accusantium natus numquam quam amet cumque rem voluptatibus atque sapiente beatae doloremque facere? Qui, voluptate suscipit ipsum aperiam enim quae a cumque quas excepturi illum hic ex. Neque, quae officia veritatis iure consequuntur ipsa magnam repudiandae dignissimos architecto rerum quis ad adipisci. Officia, rerum, omnis ab beatae praesentium placeat temporibus quaerat aut porro ratione? Dolores, molestias, libero, officiis deleniti impedit explicabo quis consectetur modi reprehenderit ullam fugit aliquid. Iusto incidunt minima optio neque.

Nested panels

Nested panels

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, repellat, distinctio, cupiditate debitis odit eos minus sequi amet fugiat aperiam assumenda expedita atque quibusdam perferendis facere! Vero, id incidunt repellat.