Live examples code for web technologies, feel free to use them in your personal or commercial projects.
If you have a how to problem to ask, please ask here.
Forms
we will study how to create forms with ease using Bootstrap. Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms. In this chapter we will study how to create forms with ease using Bootstrap.
...
Glyphicon icons
GLYPHICONS is a library of monochromatic icons and symbols that are very frequently used within toolbars and other navigations menus in the web applications. Glyphicons icons and symbols are nothing but a font and the actual nam ...
Grids
In this way, we shall create rows and columns that is stacked into rows automatically in smaller screen. To do this, we use below Bootstrap classes (n stands for number from 1 to 12)
col-lg-n - lg stands for large screen more than 1200 px ( ...
Bootstrap Buttons:
Buttons are the integral part of a website and application. They are used for various purposes like, submit or reset, performing interactive actions such as showing or hiding something on a web page on click of the button, etc. Th ...
Tables:
The HTML tables are used to present data in grid manner like row and columns. Using Bootstrap you can greatly improve the appearance of table in a simple way.
<Tr>-It is used to create the row
<Td>-It is used to define ...
Alerts:
Bootstrap provides for alerts. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.
ALerts are created with the alert class as
Alert-info
Alert-primary
Alert-warning
A ...
Typography
Bootstrap uses Some of the basic concepts while creating application they are Headings , paragraph, styles , fonts , Colors, Texts, abbreviation , body, Emphasis, Address, blockquote, Lists, Etc is called typography.
Lists:
Lists are used to create the values in a sequence manner
You can define the three different types of lists:
Unordered lists — A list of items in which the order does not explicitly matter. The list items in unordered lists ar ...
Well:
A well is a container in a div that causes the content to appear sunken or an inset effect on the page. To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .w ...
Pagination:
Pagination is defined as the multiple pages in a website, which are used to reduce the pages by creating page numbers is called pagination
Types of pagination:
Pagination active
pagination disabled
Pagination-lg
pagination-small&n ...
Progress Bar:
A progress bar is a graphical control element used to visualize the progression of an extended computer operation, Progress bars use CSS3 transitions and animations to achieve some of their effects. The purpose of p ...
Badges and labels
Badges
Badges are mainly used to highlight new or unread items. To use badges just add <span class = "badge"> to links, Bootstrap navs, and more.
Labels
Labels are used as mark up for the pages, It uses class .la ...
Dropdown
Dropdown in bootstrap is used to drop the menu in the list or button that is used to select the value in the list, we use .dropdown to drop the list
Panel
Panel is a bordered box which uses .panel which is used to insert a component in a box
Panel uses following
Panel default
Panel heading
Panel Body
Navigation elements
Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to ...
Navbar
Navbars are responsive 'meta' components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling ...
Popovers
Popovers are similar to tooltips, it is a popbox when the user clicks the button, it opens the popover which contains title and data-content in the popover, we use data-toggle as popover to create popover and we can create popovers with the ...
Affix
The affix allows a <div> to become affixed to a location on the page. You can also toggle it's pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hi ...
Thumbnails
Bootstrap's thumbnails are used to show linked images in grids with very minimum required markup, a thumbnail is created using class .thumbnail within the element <a>, The column grids are created using clas ...
Online: 8052
