Twitter Bootstrap is being used popularly due to its powerful responsive front-end capabilities. One among its components ‘Panel’ is used for accordion and we can expand or collapse its body content by clicking on link inside panel heading. But I wanted to expand collapse panel with toggle icon in Bootstrap which are placed on right side inside panel heading as shown in the image below and the icons get changed according to visibility of content in panel.
Category » Tw. Bootstrap
Bootstrap dynamic modal popup with dynamic data & content
You want to dynamically create modal popup in Twitter Bootstrap and fill it with title and content on the fly. Here in Bootstrap dynamic modal popup with dynamic data & content article, you can read how to achieve the same.
To change navbar color in Twitter Bootstrap 3
Twitter Bootstrap is a popular front-end framework to create responsive websites with some popular JavaScript plugins. Here is a workaround to change navbar color in Twitter Bootstrap 3 instead of using the two basic navbar colors (light one / dark one) available.
<!-- A light one --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- A dark one --> <nav class="navbar navbar-inverse" role="navigation"></nav>
Bootstrap 3 Pagination in WordPress
The function below will assist you to smoothly add pagination in your WordPress theme using Twitter Bootstrap 3 pagination style. This function is easy to read and to customize as well as contains features like:
- Bootstrap Styling
- First and Last Button
- Previous and Next Button
- Current page & total number of pages
- First/Last text invisible on small devices
- Previous/Next text invisible on small devices
- Works with custom post types by passing parameters to function
Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar
Twitter Bootstrap is powerful mobile first front-end framework that provides all the necessary components to develop responsive websites using its common elements. One of the most popular elements on any website is the top navigation bar and the search widget. On a recent project, I had to implement Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar and making the search bar fixed across different screen size.
Responsive CSS framework or Bootstrap – navbar breaks on two line – fix
Bootstrap is popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. I faced issue of Bootstrap navbar breaks on two line while designing interactive navbar header as you can see in picture below.
[ Page 3 of 3 ]