Panel default


<div class="panel panel-default">
    ...
</div>
                        

Panel primary


<div class="panel panel-primary">
    ...
</div>
                        

Panel success


<div class="panel panel-success">
    ...
</div>
                        

Panel info


<div class="panel panel-info">
    ...
</div>
                        

Panel warning


<div class="panel panel-warning">
    ...
</div>
                        

Panel danger


<div class="panel panel-danger">
    ...
</div>
                        

Panel default


<div class="panel panel-default panel-border">
    ...
</div>
                        

Panel primary


<div class="panel panel-primary panel-border">
    ...
</div>
                        

Panel success


<div class="panel panel-success panel-border">
    ...
</div>
                        

Panel info


<div class="panel panel-info panel-border">
    ...
</div>
                        

Panel warning


<div class="panel panel-warning panel-border">
    ...
</div>
                        

Panel danger


<div class="panel panel-danger panel-border">
    ...
</div>
                        

Panel default


<div class="panel panel-default plain">
    ...
</div>
                        

Panel primary


<div class="panel panel-primary plain">
    ...
</div>
                        

Panel success


<div class="panel panel-success plain">
    ...
</div>
                        

Panel info


<div class="panel panel-info plain">
    ...
</div>
                        

Panel warning


<div class="panel panel-warning plain">
    ...
</div>
                        

Panel danger


<div class="panel panel-danger plain">
    ...
</div>
                        

Add class .panel-tile to panel

Panel default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel success

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel info

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Closed by default

.panel-default .panel-closed

Button group in title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Horizontal scroll

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.

With icon in title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque blanditiis nobis, fugit cum nesciunt obcaecati illo autem odit libero ipsa deserunt amet dolorum provident doloremque suscipit dicta maxime ut officiis. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque blanditiis nobis, fugit cum nesciunt obcaecati illo autem odit libero ipsa deserunt amet dolorum provident doloremque suscipit dicta maxime ut officiis.

Vertical scroll

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.