Bootstrap Components Customization

Bootstrap has exploded since Twitter released it in 2011, and has become one of the most responsive and popular frameworks available. There are great features such as the extensive library of pre-styled components, plugins and add-ons. Bootstrap provides its own style components and with the help of this blog we can change the existing bootstrap components as per our design. In this blog we can create file type as per our UX Design; also we can create checkboxes, radio buttons with existing UX Design.

A custom select for Bootstrap using button dropdown

Mustard

How to Customize Bootstrap Select Box?

1. Use select picker javascripts and CSS

Html

<select class="selectpicker">
<option>Select</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

CSS

.bootstrap-select .fa{
		float: right;
		margin-top: -16px;
	}/*--This style is for Icon Position--*/

	.bootstrap-select .btn-default{
		background:#ffffff !important;
		border-radius:0px !important;
	}/*--This style is for Change Style of Background--*/

Js

 Directly customize in bootstrap-select.js and change the icon using Font Awesome

	 var drop ='
<div class="btn-group bootstrap-select' + multiple + '">' +
		'<button type="button" class="btn dropdown-toggle selectpicker" data-toggle="dropdown">' +
			'<span class="filter-option pull-left"></span> ' +
			'<i class="fa fa-angle-down"></i>' +
		'</button>' +
		'
<div class="dropdown-menu open">' +
			header +
			searchbox +
			'
<ul class="dropdown-menu inner selectpicker" role="menu">' +
			'</ul>

' +
		'</div>

' +
	'</div>

';

Change the style of
<input type=”file”> in a simple way.

In the first step take your input field where you want to display selected file name

Html

<input type="text" name="text_one" class='' id="upload-file-info" value="" />
<div style="position:relative;" class="left_browse">
	<a class='btn btn-primary' href='javascript:;'>
	<span>Choose File...</span>
<input type="file" name="file_source" size="40"  onchange='$("input[name=text_one]").val($(this).val());'>
	</a>
	</div>

CSS

input[type="text"]{
		width: 100% !important;
		float: left;
		margin-right: 20px;
		margin-top: 3px;
		position: relative;
		background:#eeeeee;
height:32px;
	}/*--This style is for Input Type--*/

	.btn-primary{
		background: #fafafa; /* Old browsers */
		color:#71718a !important;
		box-shadow:none;
		border:1px solid #cccccc;
		border-radius:4px;
		text-shadow:none;
	}/*--This style is for Button--*/

	.btn-primary:hover{
		box-shadow:none;
		border:1px solid #cccccc;
		border-radius:4px;
		text-shadow:none;
	}/*--This style is for Button--*/

	input[type="file"]{
		width:100%;
		position:absolute;
		z-index:2;
		top:0;
		left:0;
		filter: alpha(opacity=0);
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		opacity:0;
		background-color:transparent;
		color:transparent;
	}/*--This style is for File Type--*/

Js

On onchange you have to take jquery

	$("input[name=text_one]").val($(this).val());

Customize Checkbox in Simple Way

Html

<div class="roundedfour_mobile">
<input type="checkbox" value="None" id="roundedfour_mobile" name="check" />
	/*--Use Input type checkbox with unique id--*/
	<label for="roundedfour_mobile"></label>/*--Use lable for checkbox with same id--*/
	</div>

CSS

.roundedfour_mobile{
		width:35px;
		position:relative;
		float:left;
	}	/*--This is containar of checkbox--*/

	.roundedfour_mobile label {
		cursor: pointer;
		position: absolute;
		width: 20px;
		height: 20px;
		left: 4px;
		top: 4px;
		background:#ffffff;
		border:1px solid #d1d0d0;
	} /*--This is style for lable--*/

	.roundedfour_mobile label:after {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		background: url("../images/right_click.png") no-repeat top center;
		top: 4px;
		left: 4px;
	} /*--This is style for after click on check box--*/

	.roundedfour_mobile label:hover::after {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
		filter: alpha(opacity=30);
		opacity: 0.3;
	} /*--This is style for on hover and after click on check box--*/

	.roundedfour_mobile input[type=checkbox]:checked + label:after {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
	} /*--This is style for on checked state--*/

Important: If any form has multiple checkboxes, then in such a case, one needs to give different ID to each input field.

Customize Radio Button in Simple Way
Advertiser Type *
Buyer Seller

Html

<div class="radio">
<input id="Buyer" type="radio" name="gender" value="Buyer">
			<label for="Buyer">BuyerSeller</label>
	 </div>

CSS

.radio{
		width:100%;
		position:relative;
		float:left;
		padding-left:0px !important;
	}/*--This is style for containar--*/

	.radio label {
			display: inline-block;
			cursor: pointer;
			position: relative;
			padding-left: 25px;
			margin-right: 15px;
			font-size: 13px;
			font-family: 'helvetica_lt_std';
			color:#737373;
	} /*--This is style for lable--*/ 

	 .radio input[type=radio] {
			display: none;
	}  /*--This is style for input type radio--*/

	.radio label:before {
			content: "";
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-right: 10px;
			position: absolute;
			left: 0;
			bottombottom: 1px;
			background-color: #fff;
			border:1px solid #d0d0d0;
	}  /*--This is style for before click on radio button--*/

	.radio label:before {
			border-radius: 8px;
	}  

	input[type=radio]:checked + label:before {
			content: "\2022";
			color: #888888;
			font-size: 30px;
			text-align: center;
			line-height: 14px;
	}/*--This is style for checked condition on radio button--*/