Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Bootstrap Articles
Page 2 of 49
img-rounded Bootstrap class
Use the img-rounded Bootstrap class to style your image and give it rounded corners. This class applies CSS border-radius to create smooth, rounded edges on images. Syntax Example Bootstrap Images Styling Images with Bootstrap ...
Read MoreClear the float of an element with Bootstrap
To clear the float of an element in Bootstrap, use the .clearfix class. This utility class ensures that a container properly wraps around its floated child elements, preventing layout issues. What is Float Clearing? When elements are floated (using float: left or float: right), their parent container may collapse because floated elements are taken out of the normal document flow. The .clearfix class solves this by forcing the parent to contain its floated children. Example Here's how to use Bootstrap's .clearfix class to clear floated elements: ...
Read MoreClearfix Bootstrap class
The Bootstrap .clearfix class solves the common issue of parent containers collapsing when all child elements are floated. It ensures the parent container properly wraps around its floated children. What is Clearfix? When elements are floated using .pull-left or .pull-right, they are removed from the normal document flow. This can cause their parent container to have zero height, leading to layout problems. The .clearfix class forces the parent to expand and contain its floated children. Example Here's how to use the .clearfix class to properly contain floated elements: ...
Read MoreSplit Button Dropdowns with Bootstrap
Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown. Basic Structure A split button dropdown consists of two buttons wrapped in a btn-group container: Primary button: Performs the main action when clicked Dropdown toggle: Shows/hides the dropdown menu with additional options Example You can try to run the following code to create split button dropdowns: ...
Read MoreWrap Strings of Text in Bootstrap Navbar
To wrap strings of text in a Bootstrap navbar, use the .navbar-text class. This class ensures proper vertical alignment and styling for non-link text content within navigation bars. What is navbar-text? The .navbar-text class is specifically designed for adding non-interactive text elements to Bootstrap navbars. It provides appropriate spacing, alignment, and color styling that matches the navbar's design. Example You can try to run the following code to set text in Bootstrap Navbar: Bootstrap Navbar Text Example ...
Read MoreAlign the components with Bootstrap
Bootstrap provides utility classes to align navbar components horizontally. Use .navbar-left to float elements to the left and .navbar-right to float elements to the right within the navbar. Alignment Classes Bootstrap offers two primary classes for navbar alignment: .navbar-left - Floats elements to the left side of the navbar .navbar-right - Floats elements to the right side of the navbar These classes can be applied to navigation lists, forms, buttons, and text elements within the navbar. Example Here's a complete example demonstrating left and right alignment of various navbar components: ...
Read MoreGet Bootstrap Jumbotron of full width and without rounded corners
To get a jumbotron of full width and without rounded corners, use the .jumbotron class outside all .container classes and instead add a .container within. This approach makes the jumbotron span the entire viewport width while keeping the content properly centered. Default vs Full-Width Jumbotron When you place .jumbotron inside a container, it has rounded corners and limited width. Placing it outside removes these constraints: Placement Width Rounded Corners Use Case Inside .container Limited Yes Card-like appearance Outside .container Full viewport No Hero sections, landing pages Example ...
Read MoreBootstrap Labels
Labels are great for offering counts, tips, or other markups for pages. Bootstrap provides the .label class to create inline labels that complement text content. Basic Label Syntax Use the .label class along with contextual classes to create different styled labels: Default Primary Success Example Here's a complete example showing labels used with headings to display counts: Bootstrap Labels Example ...
Read MoreBootstrap Collapsible list group
To create a collapsible list group in Bootstrap, combine the panel-collapse property with the list-group property. This creates an expandable section containing a list of items that can be toggled with a click. Basic Structure A collapsible list group consists of three main components: Panel container: Wraps the entire collapsible section Panel header: Contains the clickable trigger element Collapsible content: Houses the list group items Example The following example demonstrates a collapsible list group with programming languages. Click the "Info" header to expand or collapse the list: ...
Read MoreUse HTML with jQuery to make a form
To create forms with HTML and jQuery, you can either write static HTML forms or dynamically generate them using jQuery's DOM manipulation methods. Creating a Static HTML Form The basic approach uses standard HTML form elements: Student Details: Student Name: ...
Read More