Tag: Bootstrap

Bootstrap Form Validation Using Javascript and Jquery

Bootstrap Form Validation: BS validation is easy to implement and powerful plugin for form validation of bootstrap. Bootstrap Form Validation – Form And CSS: <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="public/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <form class="form-signin" method="post" name="contactusF" id="contactusF" action=""> <div class="form-group"> <label for="name">Name</label> <input name="name" id="name" type="Text" size="52" class="form-control" placeholder="Your full Name" />

Bootstrap Alerts – Used to Display Information

Bootstrap alerts boxes are used to display information that requires immediate attention such as warning, error or confirmation messages. You can also add an optional class .alert-dismissable to dismiss any alert. Bootstrap has predefined alert messages classes like .alert-success, .alert-info, .alert-warning, .alert-danger in conjunction with .alert class. Bootstrap Alerts boxes .alert-success, .alert-info, .alert-warning, .alert-danger classes:

Bootstrap Buttons – To Make Stylish Buttons Using Various Classes

Bootstrap Buttons are used for various purposes like, submit or reset an HTML form and show, hide element on a web page on click event. To make stylish buttons using various classes like .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger and .btn-link. You can define the different sizes using .btn-lg .btn-md .btn-sm and .btn-xs classes. Bootstrap

Bootstrap List Style – Bootstrap List Example

Bootstrap List Style Bootstrap List Style are three different types: 1: Unordered lists (ul). 2: Ordered lists (ol). 3: Definition list (dl). You can group lists using bootstrap .list-group and .list-group-item classes with ul and li. <ul class="list-group"> <li class="list-group-item">HTML5</li> <li class="list-group-item">SQL</li> <li class="list-group-item">Coldfusion</li> </ul> List Group With Badges: <ul class="list-group"> <li class="list-group-item">HTML5 Blogs <span

Bootstrap 4 Carousel Plugin – Bootstrap Carousel Example

The Bootstrap 4 carousel plugin is a flexible, responsive component for images slideshow. It has many controls like pause, to scroll forwards or backwards within the set. It did not supported properly in Internet Explorer 9 and earlier. Bootstrap 4 Carousel <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li>

Dialog Box – PopUp Window – Bootstrap Modal Popup Example

Dialog Box The Modal component is a dialog box/popup window that is layered over its parent window and provide information. Modals are created with the “.modal” class. Create a Dialog Box with Twitter Bootstrap: <!-- Button to Open the Modal --> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div

Bootstrap Table Server Side With Coldfusion Component and SQL Server

Bootstrap Table Server Side With Coldfusion Component and SQL Server. BS Table have licensed under the The MIT License. Bootstrap Table Server Side HTML/JavaScript code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Bootstrap Table Server side with php and mysql</title> <!-- Bootstrap

Bootstrap Table Server Side With PHP Example

Bootstrap Table Server Side With PHP and MYSQL. Table have licensed under the The MIT License. Server side table pagination example  HTML/Javascript code -Bootstrap Table Server Side: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Bootstrap Table Server Side</title> <!-- Bootstrap core CSS

Bootstrap Heading – Default font-size is 14px

Bootstrap Heading Its default fonts like Helvetica Neue, Helvetica, Arial, and sans-serif and default font-size is 14px, with a line-height of 1.428. Bootstrap typography creates headings, paragraphs, lists and other inline elements. Headings <h1> To <h6> Example: Bootstrap styles Headings tags <h1> to <h6> <h1>This is heading 1 (36px)</h1> <h2>This is heading 2 (30px)</h2> <h3>This

Bootstrap Button Groups

Bootstrap Button Groups We can use bootstrap buttons as group of buttons in a div element using .btn-group class. Bootstrap has many optional classes to group buttons together. .btn-group class: <div class="btn-group"> <button type="button" class="btn btn-primary">Coldfusion</button> <button type="button" class="btn btn-primary">PHP</button> <button type="button" class="btn btn-primary">Sql Server</button> </div> Bootstrap vertical button groups using .btn-group-vertical class: <div class="btn-group-vertical">

Bootstrap Badges – .Badge Class Highlight – Unread Items

Bootstrap Badges highlight new or unread items. Badges work with .badge class within elements. The Badges corners are more rounded then labels.  Bootstrap Badges .badge class examples: <a href="#">News <span class="badge">10</span></a><br> <a href="#">Comments <span class="badge">15</span></a><br> <button type="button" class="btn btn-primary">Inbox <span class="badge">25</span></button>

Bootstrap Labels

Bootstrap labels displays additional information on the web pages such as important notes, warning messages, etc. Bootstrap .label class work with .label-default .label-primary .label-success .label-info .label-warning or .label-danger contextual classes within a span element. Example Label Classes: <span class="badge badge-default">Default Label</span> <span class="badge badge-primary">Primary Label</span> <span class="badge badge-success">Success Label</span> <span class="badge badge-info">Info Label</span> <span class="badge

Bootstrap Pagination

Pagination is used to display a limited number of posts or results on every page. Bootstraps creates pagination to add the .pagination class to an ul element. Basic Bootstrap Pagination: <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> Active State