Featured
-
How Regression Testing Detects Integral Errors In Business Processes
Humans are forever changing and evolving and so to
by kristina.rigina -
Get Display Banner Advertising Opportunity on FindNerd Platform
“Do you have a product or service that nee
by manoj.rawat -
Android O Released with Top 7 New Features for App Developers
Android was founded by Andy Rubin, Rich Miner, Nic
by sudhanshu.tripathi -
Top 5 Features That Make Laravel the Best PHP Framework for Development
Laravel is a free open source Web Framework of PHP
by abhishek.tiwari.458 -
Objective C or Swift - Which Technology to Learn for iOS Development?
Swift programming language is completely based on
by siddharth.sindhi
Tags
How to Implement AngulaJs Form Validation in a Web Application
AngularJS is an open source free and most popular JavaScript client-side framework which provides a great power to built HTML and JavaScript based web application.
This tutorial is in continuation with my previous tutorials, regardin...
Difference between Bootstrap 3 & Bootstrap 4
As we know, Currently, Bootstrap 4 alpha was released. So, In today blog, I am going to tell you major changes and differences between Bootstrap 3 & Bootstrap 4. Here are the following differences:-
S No.
Bootst...
Introduction to bootstrap 4
In this blog, I'll tell you a brief description of Bootstrap 4. Currently, Bootstrap 4 alpha was released. This release included a major upgrade of Bootstrap with some huge changes to the way it functions. Porting from Bootstrap 3 to Bootstra...
Bootstrap Sticky Header & Sticky Footer
In some of our site pages, we need to make the Header and Footer constantly visible and settled to top and bottom of the screen individually. In today blog, I will demonstrate how we can implement the sticky or fixed header and footer utilizing j...
Bootstrap ScrollSpy
The Scrollspy is a plugin which is used to highlight the links in a navigation according to the scroll position automatically. It indicates the location of the visitor/user in the page. The Bootstrap scrollspy plugin needs the use of proper ...
CSS content:\00a0
Hey there!
Today, while using Bootstrap breadcrumb, I came across something which I never did see before. The syntax is given as under :
content:"\00a0";
I was using Bootstrap breadcrumb and I found the above syntax there. Th...
AngularJS Pagination
We can easily apply paging on our page using AngularJs and bootstrap. Here, below is the example of this:
In View:
<div ng-app="angularPagingSample">
<div ng-controller="PagingController">
<h1>Ang...
All about Kraken PHP Framework
Kraken is revered as one of the only multi-threaded, multi-processed, fault-tolerant and one of the best PHP Framework. It is a new framework written to offer reliable and easy API for making distributed PHP applications. It aims to offer solutio...
Bootstrap Grid System
Bootstrap grid system are used for creating page layout using series of rows and columns.
It allow maximum 12 columns across the page.
First class we use in grid system is .container. All rows and columns are placed inside container. Conta...
Creating Credit Card Form Using Bootstrap
Hello readers, Today in my blog I have tried to create credit card form using Bootstrap.
In the HTML, I need to create an outer div with the class name as credit card div and had 2 nested div inside it.
With the help of ...
SystemJS and main.ts AngularJS 2
Hello everyone,This is the third tutorial of our ongoing series on AngularJS 2.
Now, let's look at the main.ts file:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(A...
Collapsed navigation for all screen sizes in Bootstrap 3
Hi there.
Navigation bars have become really easy to work with in Bootstrap 3.
Since Bootstrap 3 is mobile first, the navigation bar remains in place for a certain screen size, collapses at a certain screen size and a grid like button appea...
Chapter 8: Bootstrap - Glyphicons
Hi all,
In this post, I am going to tell you, what is Glyphicons and how to use it and its example.
What is Glyphicons?
Glyphicons are set of icon fonts style which you can use in your website. To use the icons, simply us...
Chapter 7: Bootstrap - Responsive utilities
Bootstrap gives some modest bunch helper classes, for quicker mobile-friendly development. These can be utilized for appearing and hiding content by device by means of the media query, consolidated with extensive, little, and medium gadgets.
&...
Chapter 6: Bootstrap Images
Bootstrap offers you three class for images tag. These classes have some styles for images which make your work easy. The three classes are below -
1. .img-rounded-
This class adds rounded border as 6-pixel border radius of the image.
...
Chapter 3: Bootstrap Typography
Bootstrap typography is used for to manage the content text of the webpage. Bootstrap uses 14 pixel font size with line-height 1.4 with default font family Helvetica Neue, Helvetica, Arial, and sans-serif.
Typography is used to create headings...
Chapter 2: Bootstrap Grid System
Basically, grid is a format which is divided into div columns. This is a very useful method to manage HTML layout and users can make easily.
In bootstrap it is based on 12 columns, you can group the columns together to create wider columns.
...
Chapter 1: Bootstrap Overview
Nowadays Bootstrap is most popular front-end framework. This is very fast and easy to maintain. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It is open source and released August 2011 on GitHub.
It has built-in component...
Open Another Modal in Modal bootstrap
Here what I am doing is opening the modal window in which there are two buttons one is close button and other is open other model button. On clicking the other modal window other modal opens up and the previous one fades away. Here i will s...
Types of Bootstrap Pagination
Hello readers.
This blog post will clear your queries regarding the concept Pagination in Bootstrap. The need for pagination arises when you have a website with lot of web pages. Basically, Pagination is the process of organizing content by di...
Integrate Postgresql with Node JS
Many Programmers feel comfortable to use Postgre SQL rather than MongoDB, member of MEAN Stack.
We are going to integrate Postgresql with NodeJS
To install NodeJS, please go through this Article
Now, when we are finished with Installatio...
Image Zoom Effect Using CSS3
Hello,readers as we all visit various websites we mostly get attractive towards those websites comprising with various animation effects in it.So here in my example i have tried to give zooming effect to the images using CSS3 properties such as t...
Animated checkbox using CSS3
Hello,readers I had created a simple animated checkbox using Font Awesome ( CSS Bootstrap file), along with pseudo elements, CSS3 Transition property and opacity.
In my example, I had created an unordered list and placed checkbox tag along wit...
Bootstrap Navbar Menu without Javascript
The navbar menu is used in header or footer and in many cases in the content also. It is responsive by default in bootstrap and take size according to screen size.
The navbar get collapsed in case of small devices like mobile phones and there is...
Hiding div elements in a responsive layout using bootstrap classes
Hiding div elements in a responsive layout using bootstrap classes:
We can easily hide a div block on a particular layout like for extra small devices(mobile) or for tablets or for desktop using bootstrap classes.
Classes
De...
Implementing Slider with Angular UI Bootstrap
To create slider with angular UI, carousel is used as it is same as bootstrap's image carousel. But It also supports swiping in the touch devices. ngTouch is used to enable the swiping in the touch devices. We have to load ngTouch module as a...
Comparision between Bootstrap and Foundation Framework
Cheat-Sheet for Comparison between Bootstrap and Foundation Classes and Elements
Introduction of Bootstrap and Foundation
Bootstrap and foundation frameworks are very well known font-end framework for Respons...
Bootstrap Tooltip Plugin
The Tooltip plugin is used to show the details of an element when the user will hover on that element. It will show a small pop-up in the specified position to the element.
You have to use data-toggle="tooltip" attribute and a title in the ele...
How to make Login and Signup in a single template
Hello Reader's if you are making the resposive website then you can make login and signup in same desing template.
Then you just have to create a front page in html and use the following code:-
<link href="//maxcdn.bootstrapcdn.com/font-...
Laravel with Bootstrap open modal or popup automatically
Hi Readers,
If you are using Bootstrap in your application you should use modal to show popups in your web application. Modal is a very nice feature provided by the Bootstrap to show nice and beautiful popups which can be easily modifiable...
Bootstrap Sticky Footer
Many times the webpage footer comes up due to no or less content on the webpage. We can resolve that with the help of Bootstrap CSS this is also known as Sticky Footer. This CSS will make sure that the footer will remain at the bottom of the scre...
Bootstrap Popover with Laravel 5.0 Both with and without Ajax
Sometimes we need to provide the link of the webpage specially if the content is coming from Ajax or we have multiple contents everyone opening on different webpage in a popover. At that time we can use this functionality of Bootstrap to get the ...
Custom Pagination With Bootstrap
Hi All,
I recently required to created a custom pagination with the help of Bootstrap in my core PHP project. I thought that my code may help others also who wish to create the same.
The reason why I am using Bootstrap is as it ease our wor...
How to color to your alert message using Bootstrap
Hello Reader's If you want to print the alert messages in color, i.e. Red for danger and Green for success messages then Twitter Bootstrap offers you a good way to showing this.
Let's see the example as below:-
<!DOCTYPE html>
<ht...
How to expand the div with a click using Bootstrap
Hello Reader's if you are new to Bootstrap, And you want to expand the div with a single click.
Lets see the example below:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sc...
Bootstrap float
how to float an element to left or right.
Bootstrap provides predefined classes pull-right and pull-left which floats an element to the left or right according to the requirement. For example if you want to float an image to the right and text...
html address
html address.
html5 provides an inbuilt tag <address>.Through this tag you can define contact information of a document or article.The element between the address is displayed in italic and also most browsers will also add line break bef...
Column offseting.
How can we increase the left margin of a column in bootstrap.
In bootstrap we can increase the left margin of a column by adding class offset. for example by adding
.col-md-offset-4 moves .col-md-4 by four places.
<div class="row">
...
Text highlight
How to highlight a text in bootstrap
In bootstrap we can highlight the important text with the tag <mark>. Thus text can be easily highlighted and customization can be done as required.
As shown in example below name of country's get...
Gradient
How to create background of two colors.
In bootstrap we can create background of two colors with the help of gradient.You can also specify the angle os standard two color.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#...
Clearfix
how to clear floats in bootstrap.
Bootstrap provides an predefined class .clearfix through which you can clear floats just by adding this class to the parent element.
.clearfix() {
&:before,
&:after {
content: " ";
...
Feedback with optional icons
Feedback with optional icons.
Bootstrap provides classes to add optional feedback icons which would required manual positioning for inputs. Thus, it save a lot of time for making it user friendly. This can be done by adding class .has-feedback...
Validation states
Validation states
We can denote the state of a form through visual,color-based indications.This can be done through using classes as .control-label, .form-control, and .help-block.These are the validation styles for warning, error and success ...
Images shapes
Images shapes.
In bootstrap,we can modify shape of image just by adding pre-defined classes as img-rounded,img-circle,img-thumbnail.It saves a lot of time of developer as prevents them from long and confusing coding for creating different shap...
Static Contol
Static Control.
When we need to insert an plane text in front of form label we can do this by adding a class .form-control static class.Thus bootstrap provides an predefined class for inserting an plane text thus making it more effecient for ...
Checkboxes and radios
Checkboxes and radios.
In bootstrap we can add features of multiple selection from group of choices with the help of checkboxes while for selecting one option out of many we use radios.It also provides an option of disabled checkboxes and radi...
Horizontal form
Horizontal form.
Bootstrap provide us the feature to align labels and groups of form controls,we can do so by adding .form-horizonal class to the form.Required customization can be done by little effort making it more user friendly and time sa...
Contextual classes
Contextual classes
In bootstrap we can create color table rows and cells with the help of contextual classes such as active,success,info,warning,danger.
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success...
Media queries
Media queries
In bootstrap we can create responsive site which can run on desktop as well as mobile.Thus breakpoints can be defined by using media queries whose attributes can be changed under specified conditions.
<!-- Stack the colum...
Bootstrap Pager
Bootstrap Pager
In case of multiple pages in bootstrap,we can also create previous and next links for effective pagination. This is used when the number of pages are less in quantity. It is great and effective for simple sites blogs or magazin...
