Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you use Panels in Bootstrap 2.3

Tags:

Is there any easy way of using bootstrap 3 panels within bootstrap 2.3. From what I can see the panels styling is a new feature within BS 3.

like image 803
felix001 Avatar asked Oct 07 '13 08:10

felix001


People also ask

What is scaffolding in Bootstrap?

Scaffold is a modern and fresh HTML website template built with bootstrap framework. It's awesome and creative responsive HTML5 template created for business, corporate, portfolio, startup and agency websites. It is a very simple, clean and professionally for showcasing your work or services.

Does Bootstrap work with CSS?

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.

What are Bootstrap components?

Different Bootstrap Components. Bootstrap is bundled with tens of components that can be reused to provide a good user experience and user interactions in a web page like navigation bars, pop-ups, dropdowns, icons, buttons, pre-designed forms and also sizing options for different DOM elements.

Is Bootstrap responsive by default?

Apart from this, you're good to go: Bootstrap is responsive by default.


2 Answers

For this your bootstrap.css code must have the styling of panels. So that you have to paste the below styles into your bootstrap.css/bootstrap.min.css file. If you are not interested in changing the core files, you can add it in your css files. you can follow the codes in http://getbootstrap.com/components/#panels after doing this.

.panel {   padding: 15px;   margin-bottom: 20px;   background-color: #ffffff;   border: 1px solid #dddddd;   border-radius: 4px;   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }  .panel-heading {   padding: 10px 15px;   margin: -15px -15px 15px;   font-size: 17.5px;   font-weight: 500;         background-color: #f5f5f5;   border-bottom: 1px solid #dddddd;   border-top-right-radius: 3px;   border-top-left-radius: 3px; }  .panel-footer {   padding: 10px 15px;   margin: 15px -15px -15px;   background-color: #f5f5f5;   border-top: 1px solid #dddddd;   border-bottom-right-radius: 3px;   border-bottom-left-radius: 3px; }  .panel-primary {   border-color: #428bca; }  .panel-primary .panel-heading {   color: #ffffff;   background-color: #428bca;   border-color: #428bca; }  .panel-success {   border-color: #d6e9c6; }  .panel-success .panel-heading {   color: #468847;   background-color: #dff0d8;   border-color: #d6e9c6; }  .panel-warning {   border-color: #fbeed5; }  .panel-warning .panel-heading {   color: #c09853;   background-color: #fcf8e3;   border-color: #fbeed5; }  .panel-danger {   border-color: #eed3d7; }  .panel-danger .panel-heading {   color: #b94a48;   background-color: #f2dede;   border-color: #eed3d7; }  .panel-info {   border-color: #bce8f1; }  .panel-info .panel-heading {   color: #3a87ad;   background-color: #d9edf7;   border-color: #bce8f1; } 
like image 71
GaneshPandian Avatar answered Oct 10 '22 03:10

GaneshPandian


If you plan to put a table inside the panel, you'll want to also add

.panel>.table, .panel>.table-responsive>.table {       margin-bottom: 0; } 
like image 43
Chad Avatar answered Oct 10 '22 03:10

Chad