Some bootstrap 3 component shortcode for WordPress.

component_shortcode.php

<?php 

/*
Plugin Name: Stock Toolkit
*/

//Progress Bar Shortcode

function stock_progress_shortcode($atts, $content = null){
	
	extract(shortcode_atts(
		array(
			'percentage' => '',
			'value' => ''
		),
		$atts 
	));
	
	return '<div class="progress">
		  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: '. ($percentage) .'%">
			'.$value.'
		  </div>
		</div>';
}
add_shortcode('progress','stock_progress_shortcode');

//Alert Shortcode
function stock_alert_shortcode($atts, $content = null){
	
	extract(shortcode_atts(
		array(
			'type' => '',
		),
		$atts 
	));
	
	return '<div class="alert alert-'.esc_attr($type).'" role="alert">'.$content.'</div>';
}
add_shortcode('alert','stock_alert_shortcode');

//Label Shortcode
function stock_label_shortcode($atts, $content= null){
	extract(shortcode_atts(
		array(
			
			'type' => '',
			'text' => ''
		
		),
		$atts
	));
	
	return '<span class="label label-'.$type.'">'.$text.'</span>';
}
add_shortcode('label','stock_label_shortcode');

//Using Codition in Shortcode
function stock_mycity_shortcode($atts, $content = null){
	extract(shortcode_atts(
		array(
			'city'	=> '',
			'fontsize' => ''
		),
		$atts 
	
	));
	
	if($city == 'Dhaka'){
		$message = '<p style="font-size: '.$fontsize.'px;">'.esc_html($city).' is the most poulated city</p>';
	}elseif($city == 'Sylhet'){
		$message = '<p style="font-size: '.$fontsize.'px;">'.esc_html($city).' is the most beautiful city</p>';
	}elseif($city == 'Barishal'){
		$message = '<p style="font-size: '.$fontsize.'px;">'.esc_html($city).' is the most Land of river</p>';
	}else{
		$message = '<p>You have not selected any city</p>';
	}
	
	return $message;
	
}
add_shortcode('mycity','stock_mycity_shortcode');

//Call image with shortcode
function stock_image_shortcode($atts, $content = null){
	
	extract(shortcode_atts(
	
		array(
			'id' => '',
			'size' => ''
		),
		$atts 
	
	));
	
	$img_array = wp_get_attachment_image_src($id, $size);
	
	return '<img src="'.$img_array[0].'" />';
}
add_shortcode('image','stock_image_shortcode');



/*

/*=====Progress Bar=====*/

[progress percentage="20" value="20%"]
[progress percentage="50" value="50%"]
[progress percentage="70" value="70%"]
[progress percentage="90" value="90%"]

/*=====Alert Type=====*/

[alert type="danger"]Danger Zone[/alert]
[alert type="info"]Danger Zone[/alert]
[alert type="warning"]Warning Zone[/alert]
[alert type="success"]Success Zone[/alert]

/*=====Label=====*/

[label type="default" text="label default"]
[label type="primary" text="label primary"]
[label type="info" text="label info"]
[label type="success" text="label  success"]
[label type="warning" text="label  warning"]
[label type="danger" text="label  danger"]

/*=====Your City [Using Condition in Shortcode]=====*/

[mycity city="Dhaka" fontsize="28"]
[mycity city="Sylhet" fontsize="27"]
[mycity city="Barishal" fontsize="25"]
[mycity city="Kustia" fontsize="24"]

/*=====Image Shortcode [Using image ID]=====*/

[image id="77" size="thumbnail"]

*/