TheBestTutorials Examples
TheBestTutorials Containers
Container
Container with color
Container header
Container footer
Container article and section
Container notes
Container panels
Container quotes
Container with <div> elements
Container with semantic elements
Container padding
Container with headers and paragraphs
Container sectioning
Hiding/closing containers
Show/open containers
TheBestTutorials Fonts
Headings
Font-size classes
Overriding subhodaya.css standards
How to use a font class
How to use external fonts
External google font: lobster
Font effects
Font effects 2
Changing the page font
TheBestTutorials Borders
Borders
Displaying notes
Displaying panels
Displaying quotes
Displaying hoverable borders
TheBestTutorials Utilities / Helpers
Padding on all sides
Horizontal padding
Vertical padding
Margin utilities
Sizing utilities
Rounding utilities
Circle utilities
Center utilities
Floating utilities
Show/hide utilities
TheBestTutorials Buttons
Buttons
Button colors
Hover colors
Button shapes
Button sizes
Button borders
Buttons with text effects
Buttons with shadow effects
Buttons with slim and wide text effects
Padded buttons
Full-width buttons
Disabled buttons
Button groups
Button groups on the same line
Button bars
Buttons with ripple effects
Floating buttons (circular)
Large floating buttons
TheBestTutorials Cards
Cards
Colored cards
Card content
Photo cards
Hoverable cards
Avatar card with buttons
Avatar card with full-width button
TheBestTutorials Alerts
Basic alerts
Closable alerts
Rounded alerts
Alert cards
TheBestTutorials Tables
Basic table
Bordered table (horizontal dividers)
Striped table
Bordered striped table
Borders around the table
Table all (combines stripes, borders, etc)
Flipping the stripes
Table with a colored heading
Table colors
Hoverable table (grey color)
Specific hoverable table color
Table card
Responsive table
Tiny table
Small table
Large table
XLarge table
XXLarge table
XXXLarge table
Jumbo table
TheBestTutorials Lists
Basic list
Bordered list
List header
List card
Centered list
Colored list
Colored list item
Hoverable list (grey color)
Specific hoverable list color
Closable list
Padded list
Avatar list
Tiny list
Small list
Large list
XLarge list
XXLarge list
XXXLarge list
Jumbo list
TheBestTutorials Images
Rounded image
Circled image
Bordered image
Hoverable image
Image card
Resposive image
Responsive image with max width
Image text
Image opacity (default)
Image opacity (any value)
Photo Album
TheBestTutorials Inputs
Top labels
Bottom labels
Input cards
Green labels
Validating label inputs
Colored labels
Bordered inputs
Rounded borders
Borderless input
Colored inputs
Hoverable inputs
Animated inputs
Checkboxes
Radio buttons
Select menu
Bordered select menu
Form elements in a three-column grid
Two-column layout with labels
TheBestTutorials Badges
Badges
Tags
List with badges
Large tags
Large badges
Displaying letters as tags
TheBestTutorials Signs
Tag as a sign
Tags in a row
Road signs
Large signs
Large signs 2
Large rounded signs
Displaying a flag
TheBestTutorials Icons
Font awesome icons
Google material design icons
Bootstrap icons
TheBestTutorials Responsive
The subhodaya-half class
The subhodaya-third class
The subhodaya-twothird class
The subhodaya-quarter class
The subhodaya-threequarter class
Nested rows (subhodaya-half inside subhodaya-half)
Columns using subhodaya-rest
Columns using percent
The subhodaya-content class
Difference between subhodaya-row and subhodaya-row-padding
TheBestTutorials Animate
Top animation
Bottom animation
Left animation
Right animation
Fading animation
Fading infinite animation
Zoom animation
Spin animation
Fade all
TheBestTutorials Dropdowns
Hoverable dropdown menu
Hoverable dropdown
Dropdown in navbar
Clickable dropdown menu
Image dropdown
Card dropdown
Animated dropdown
Right-aligned dropdown
TheBestTutorials Accordions
Basic accordion
Accordion buttons
Active accordion
Accordion width
Accordion links
Accordion card with lists
Accordion and dropdown in sidenav
Animated accordion
TheBestTutorials Navigation
Basic navigation (subhodaya-navbar)
Colored navbar
Bordered navbar
Active link in navbar
Hoverable navbar links
Right-aligned links
Navbar font-size
Navbar padding
Navbar width
Navbar icons
Navbar with dropdown
Navbar with an active dropdown and icon
Navbar with clickable dropdown
Top navbar
Bottom navbar
Collapsible navbar
Topnav
Topnav with icons
TheBestTutorials Sidenav
Basic sidenav (always displayed)
Collapsible sidenav
Sidenav hiding a part of the page content
Sidenav hiding all page content
Sidenav shift content to the right
Sidenav color
Bordered sidenav
Bottom bordered sidenav (dividers)
Sidenav card
Hoverable sidenav links (background color)
Hoverable sidenav links (text color)
Sidenav size
Sidenav with icons (icon bar)
Sidenav with dropdown
Sidenav with accordion
Animated sidenav
Sidenav with overlay effect
Sidenav with content
TheBestTutorials Tabs
Basic tab
Active/current tab
Vertical tab
Animated tab content
Tabbed image gallery
Tabs in a grid
TheBestTutorials Pagination
Basic pagination
Pagination arrows
Active pagination link
Pagination hover color
Pagination size
Bordered pagination
Rounded bordered pagination
Centered pagination
Next/previous pagination arrows
Pagination menu
TheBestTutorials Progress Bars
Basic progress bar
Progress bar sizes
Progress bar colors
Rounded progress bars
Progress bar labels
Dynamic progress bar
Dynamic progress bar with centered label
Dynamic progress bar with left-aligned label
Dynamic progress bar with label placed outside
TheBestTutorials Slideshow
Manual slideshow with images
Automatic slideshow with images
Automatic HTML slides
Slideshow captions
Slideshow indicators with numbers and prev/next buttons
Slideshow indicators with icons and bullets
Images as indicators
Animated slides
Automatic slideshow with infinite fading
TheBestTutorials Text Effects
TheBestTutorials Modal
Basic modal (dialog box/popup window)
Modal with containers
Modal card
Animated modal
Fade in modal
Modal image
Modal image gallery
Modal login form
Modal tab
How to close the modal
TheBestTutorials Tooltips
Inline tooltip text
Inline tooltip tag
Tooltip text before a hoverable image
Tooltip text after a hoverable image
Absolute tooltip
Colored tooltip
Rounded tooltip
Small tooltip
Large tooltip
TheBestTutorials Responsive Grid
Fluid grid demonstration
Two equal columns
Two unequal columns
Three equal columns
Three unequal columns
Six equal columns
Mixed: Mobile and Laptops
Mixed: Mobile, Tablets and Laptops
Difference between subhodaya-row and subhodaya-row-padding
Columns using subhodaya-rest
Columns using percent
TheBestTutorials Code
Displaying examples
Displaying code
Displaying colored HTML
Displaying colored CSS
Displaying colored JavaScript code
