Components

Notes : Button with Icons

When using icons, by default are too close to the text, because there is no margin.
To avoid using  , Smarty will add required margins to icons and few corrections are needed in some situations:

1. Icon only, no text

class .m-0 added directly to the icon

bad    good    nothing needed 
<!-- bad -->
<a href="#" class="btn btn-primary">
    <i class="fi fi-check"></i>
</a>

<!-- good -->
<a href="#" class="btn btn-primary">
    <i class="fi fi-check m-0"></i>
</a>

<!-- nothing needed -->
<a href="#" class="btn btn-primary rounded-circle">
    <i class="fi fi-check"></i>
</a>
2. Icon after text only

text is wrapped inside <span>

Bad    Good    Nothing needed 
<a href="#" class="btn btn-primary">
    Bad
    <i class="fi fi-arrow-end"></i>
</a>

<a href="#" class="btn btn-primary">
    <span>Good</span>
    <i class="fi fi-arrow-end"></i>
</a>

<a href="#" class="btn btn-primary">
    <i class="fi fi-arrow-end"></i>
    Nothing needed
</a>

Default Buttons


Newly added in bootstrap theme map: .btn-indigo, .btn-purple, .btn-pink.
Is generated by boostrap SCSS, so for example: any .*-pink will work (buttons, badges, text, backgrounds, etc).
You can also add more theme colors in less than 5 seconds by editing $theme-colors in variables.scss
view code 


<!-- add .btn-sm or .btn-lg class to any -->



<!-- form buttons -->
<button type="button" class="btn btn-primary mb-1">Primary</button>
<button type="button" class="btn btn-secondary mb-1">Secondary</button>
<button type="button" class="btn btn-success mb-1">Success</button>
<button type="button" class="btn btn-danger mb-1">Danger</button>
<button type="button" class="btn btn-warning mb-1">Warning</button>
<button type="button" class="btn btn-info mb-1">Info</button>
<button type="button" class="btn btn-light mb-1">Light</button>
<button type="button" class="btn btn-dark mb-1">Dark</button>
<button type="button" class="btn btn-indigo mb-1">Indigo</button>
<button type="button" class="btn btn-purple mb-1">Purple</button>
<button type="button" class="btn btn-pink mb-1">Pink</button>

<button type="button" class="btn btn-link mb-1">Link</button>


<!-- links -->
<a href="#!" class="btn btn-primary mb-1">Primary</a>
<a href="#!" class="btn btn-secondary mb-1">Secondary</a>
<a href="#!" class="btn btn-success mb-1">Success</a>
<a href="#!" class="btn btn-danger mb-1">Danger</a>
<a href="#!" class="btn btn-warning mb-1">Warning</a>
<a href="#!" class="btn btn-info mb-1">Info</a>
<a href="#!" class="btn btn-light mb-1">Light</a>
<a href="#!" class="btn btn-dark mb-1">Dark</a>
<a href="#!" class="btn btn-indigo mb-1">Indigo</a>
<a href="#!" class="btn btn-purple mb-1">Purple</a>
<a href="#!" class="btn btn-pink mb-1">Pink</a>

<a href="#!" class="btn btn-link mb-1">Link</a>

Soft Buttons

view code 

<!-- buttons : normal on hover -->
<button type="button" class="btn btn-primary btn-soft mb-1">Primary</button>
<button type="button" class="btn btn-secondary btn-soft mb-1">Secondary</button>
<button type="button" class="btn btn-success btn-soft mb-1">Success</button>
<button type="button" class="btn btn-danger btn-soft mb-1">Danger</button>
<button type="button" class="btn btn-warning btn-soft mb-1">Warning</button>
<button type="button" class="btn btn-info btn-soft mb-1">Info</button>
<button type="button" class="btn btn-light btn-soft mb-1">Light</button>
<button type="button" class="btn btn-dark btn-soft mb-1">Dark</button>
<button type="button" class="btn btn-indigo btn-soft mb-1">Indigo</button>
<button type="button" class="btn btn-purple btn-soft mb-1">Purple</button>
<button type="button" class="btn btn-pink btn-soft mb-1">Pink</button>

<!-- buttons : static on hover -->
<button type="button" class="btn btn-primary btn-soft-static mb-1">Primary</button>
<button type="button" class="btn btn-secondary btn-soft-static mb-1">Secondary</button>
<button type="button" class="btn btn-success btn-soft-static mb-1">Success</button>
<button type="button" class="btn btn-danger btn-soft-static mb-1">Danger</button>
<button type="button" class="btn btn-warning btn-soft-static mb-1">Warning</button>
<button type="button" class="btn btn-info btn-soft-static mb-1">Info</button>
<button type="button" class="btn btn-light btn-soft-static mb-1">Light</button>
<button type="button" class="btn btn-dark btn-soft-static mb-1">Dark</button>
<button type="button" class="btn btn-indigo btn-soft-static mb-1">Indigo</button>
<button type="button" class="btn btn-purple btn-soft-static mb-1">Purple</button>
<button type="button" class="btn btn-pink btn-soft-static mb-1">Pink</button>




<!-- links : normal on hover -->
<a href="#" class="btn btn-primary btn-soft mb-1">Primary</a>
<a href="#" class="btn btn-secondary btn-soft mb-1">Secondary</a>
<a href="#" class="btn btn-success btn-soft mb-1">Success</a>
<a href="#" class="btn btn-danger btn-soft mb-1">Danger</a>
<a href="#" class="btn btn-warning btn-soft mb-1">Warning</a>
<a href="#" class="btn btn-info btn-soft mb-1">Info</a>
<a href="#" class="btn btn-light btn-soft mb-1">Light</a>
<a href="#" class="btn btn-dark btn-soft mb-1">Dark</a>
<a href="#" class="btn btn-indigo btn-soft mb-1">Indigo</a>
<a href="#" class="btn btn-purple btn-soft mb-1">Purple</a>
<a href="#" class="btn btn-pink btn-soft mb-1">Pink</a>

<!-- links : static on hover -->
<a href="#" class="btn btn-primary btn-soft-static mb-1">Primary</a>
<a href="#" class="btn btn-secondary btn-soft-static mb-1">Secondary</a>
<a href="#" class="btn btn-success btn-soft-static mb-1">Success</a>
<a href="#" class="btn btn-danger btn-soft-static mb-1">Danger</a>
<a href="#" class="btn btn-warning btn-soft-static mb-1">Warning</a>
<a href="#" class="btn btn-info btn-soft-static mb-1">Info</a>
<a href="#" class="btn btn-light btn-soft-static mb-1">Light</a>
<a href="#" class="btn btn-dark btn-soft-static mb-1">Dark</a>
<a href="#" class="btn btn-indigo btn-soft-static mb-1">Indigo</a>
<a href="#" class="btn btn-purple btn-soft-static mb-1">Purple</a>
<a href="#" class="btn btn-pink btn-soft-static mb-1">Pink</a>

Pill Buttons


view code 

<!-- pill : default -->
<button type="button" class="btn btn-primary btn-pill mb-1">Primary</button>
<button type="button" class="btn btn-secondary btn-pill mb-1">Secondary</button>
<button type="button" class="btn btn-success btn-pill mb-1">Success</button>
<button type="button" class="btn btn-danger btn-pill mb-1">Danger</button>
<button type="button" class="btn btn-warning btn-pill mb-1">Warning</button>
<button type="button" class="btn btn-info btn-pill mb-1">Info</button>
<button type="button" class="btn btn-light btn-pill mb-1">Light</button>
<button type="button" class="btn btn-dark btn-pill mb-1">Dark</button>

<!-- pill : outline -->
<button type="button" class="btn btn-outline-primary btn-pill mb-1">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-pill mb-1">Secondary</button>
<button type="button" class="btn btn-outline-success btn-pill mb-1">Success</button>
<button type="button" class="btn btn-outline-danger btn-pill mb-1">Danger</button>
<button type="button" class="btn btn-outline-warning btn-pill mb-1">Warning</button>
<button type="button" class="btn btn-outline-info btn-pill mb-1">Info</button>
<button type="button" class="btn btn-outline-light btn-pill mb-1">Light</button>
<button type="button" class="btn btn-outline-dark btn-pill mb-1">Dark</button>

<!-- pill : soft -->
<button type="button" class="btn btn-primary btn-soft btn-pill mb-1">Primary</button>
<button type="button" class="btn btn-secondary btn-soft btn-pill mb-1">Secondary</button>
<button type="button" class="btn btn-success btn-soft btn-pill mb-1">Success</button>
<button type="button" class="btn btn-danger btn-soft btn-pill mb-1">Danger</button>
<button type="button" class="btn btn-warning btn-soft btn-pill mb-1">Warning</button>
<button type="button" class="btn btn-info btn-soft btn-pill mb-1">Info</button>
<button type="button" class="btn btn-light btn-soft btn-pill mb-1">Light</button>
<button type="button" class="btn btn-dark btn-soft btn-pill mb-1">Dark</button>

<!-- pill : ghost -->
<button type="button" class="btn btn-ghost btn-primary btn-pill mb-1">Primary</button>
<button type="button" class="btn btn-ghost btn-secondary btn-pill mb-1">Secondary</button>
<button type="button" class="btn btn-ghost btn-success btn-pill mb-1">Success</button>
<button type="button" class="btn btn-ghost btn-danger btn-pill mb-1">Danger</button>
<button type="button" class="btn btn-ghost btn-warning btn-pill mb-1">Warning</button>
<button type="button" class="btn btn-ghost btn-info btn-pill mb-1">Info</button>
<button type="button" class="btn btn-ghost btn-light btn-pill mb-1">Light</button>
<button type="button" class="btn btn-ghost btn-dark btn-pill mb-1">Dark</button>





<!-- link : pill : default -->
<a href="#" class="btn btn-primary btn-pill mb-1">Primary</a>
<a href="#" class="btn btn-secondary btn-pill mb-1">Secondary</a>
<a href="#" class="btn btn-success btn-pill mb-1">Success</a>
<a href="#" class="btn btn-danger btn-pill mb-1">Danger</a>
<a href="#" class="btn btn-warning btn-pill mb-1">Warning</a>
<a href="#" class="btn btn-info btn-pill mb-1">Info</a>
<a href="#" class="btn btn-light btn-pill mb-1">Light</a>
<a href="#" class="btn btn-dark btn-pill mb-1">Dark</a>

<!-- link : pill : outline -->
<a href="#" class="btn btn-outline-primary btn-pill mb-1">Primary</a>
<a href="#" class="btn btn-outline-secondary btn-pill mb-1">Secondary</a>
<a href="#" class="btn btn-outline-success btn-pill mb-1">Success</a>
<a href="#" class="btn btn-outline-danger btn-pill mb-1">Danger</a>
<a href="#" class="btn btn-outline-warning btn-pill mb-1">Warning</a>
<a href="#" class="btn btn-outline-info btn-pill mb-1">Info</a>
<a href="#" class="btn btn-outline-light btn-pill mb-1">Light</a>
<a href="#" class="btn btn-outline-dark btn-pill mb-1">Dark</a>

<!-- link : pill : soft -->
<a href="#" class="btn btn-primary btn-soft btn-pill mb-1">Primary</a>
<a href="#" class="btn btn-secondary btn-soft btn-pill mb-1">Secondary</a>
<a href="#" class="btn btn-success btn-soft btn-pill mb-1">Success</a>
<a href="#" class="btn btn-danger btn-soft btn-pill mb-1">Danger</a>
<a href="#" class="btn btn-warning btn-soft btn-pill mb-1">Warning</a>
<a href="#" class="btn btn-info btn-soft btn-pill mb-1">Info</a>
<a href="#" class="btn btn-light btn-soft btn-pill mb-1">Light</a>
<a href="#" class="btn btn-dark btn-soft btn-pill mb-1">Dark</a>

<!-- link : pill : ghost -->
<a href="#" class="btn btn-ghost btn-primary btn-pill mb-1">Primary</a>
<a href="#" class="btn btn-ghost btn-secondary btn-pill mb-1">Secondary</a>
<a href="#" class="btn btn-ghost btn-success btn-pill mb-1">Success</a>
<a href="#" class="btn btn-ghost btn-danger btn-pill mb-1">Danger</a>
<a href="#" class="btn btn-ghost btn-warning btn-pill mb-1">Warning</a>
<a href="#" class="btn btn-ghost btn-info btn-pill mb-1">Info</a>
<a href="#" class="btn btn-ghost btn-light btn-pill mb-1">Light</a>
<a href="#" class="btn btn-ghost btn-dark btn-pill mb-1">Dark</a>

Icon Buttons

     



view code 

<!-- 
	Add to any button:
		.btn-primary
		.btn-secondary
		.btn-danger
		.btn-warning
		.btn-info
		.btn-dark
		.btn-light
 -->


<!-- default -->
<button type="button" class="btn btn-lg rounded-circle btn-primary mb-2">
	<i class="fi fi-check"></i>
</button>


<!-- outline -->
<button type="button" class="btn btn-lg rounded-circle btn-outline-primary mb-2">
	<i class="fi fi-check"></i>
</button>


<!-- soft -->
<button type="button" class="btn btn-lg rounded-circle btn-primary btn-soft mb-2">
	<i class="fi fi-check"></i>
</button>




<!-- link : default -->
<a href="#" class="btn btn-lg rounded-circle btn-primary mb-2">
	<i class="fi fi-check"></i>
</a>


<!-- link : outline -->
<a href="#" class="btn btn-lg rounded-circle btn-outline-primary mb-2">
	<i class="fi fi-check"></i>
</a>


<!-- link : soft -->
<a href="#" class="btn btn-lg rounded-circle btn-primary btn-soft mb-2">
	<i class="fi fi-check"></i>
</a>

Hover Animated

           

Zoom   Zoom    
view code 

<!-- 
	Add to any button:
		.btn-primary
		.btn-secondary
		.btn-danger
		.btn-warning
		.btn-info
		.btn-dark
		.btn-light
 -->


<!-- hover transition -->
<button type="button" class="btn btn-primary transition-hover-top mb-1">Top</button>

<button type="button" class="btn btn-primary transition-hover-right mb-1">Right</button>

<button type="button" class="btn btn-primary transition-hover-bottom mb-1">Bottom</button>

<button type="button" class="btn btn-primary transition-hover-left mb-1">Left</button>


<!-- no shadow -->
<button type="button" class="btn btn-primary btn-noshadow mb-1">No hover shadow</button>


<!-- hover zoom -->
<button type="button" class="btn btn-primary transition-hover-zoom mb-1">Zoom</button>






<!-- link : hover transition -->
<a href="#" class="btn btn-primary transition-hover-top mb-1">Top</a>

<a href="#" class="btn btn-primary transition-hover-right mb-1">Right</a>

<a href="#" class="btn btn-primary transition-hover-bottom mb-1">Bottom</a>

<a href="#" class="btn btn-primary transition-hover-left mb-1">Left</a>


<!-- link : no shadow -->
<a href="#" class="btn btn-primary btn-noshadow mb-1">No hover shadow</a>


<!-- link : hover zoom -->
<a href="#" class="btn btn-primary transition-hover-zoom mb-1">Zoom</a>

Social Buttons

facebook twitter instagram linkedin vimeo youtube github email


view code 

<a href="#" class="btn btn-facebook transition-hover-top" rel="noopener" target="_blank">facebook</a>
<a href="#" class="btn btn-twitter transition-hover-top" rel="noopener" target="_blank">twitter</a>
<a href="#" class="btn btn-linkedin transition-hover-top" rel="noopener" target="_blank">linkedin</a>
<a href="#" class="btn btn-vimeo transition-hover-top" rel="noopener" target="_blank">vimeo</a>
<a href="#" class="btn btn-youtube transition-hover-top" rel="noopener" target="_blank">youtube</a>


<!-- 

	Note:
		Because of icon spacing inside squared buttons, .m-0 class is required to icons.
		Not required if .rounded-circle is used. By default is added to avoid confusion.
-->

<!-- remove .rounded-circle for squared -->
<a href="#" class="btn btn-facebook rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-facebook m-0"></i>
</a>
<a href="#" class="btn btn-twitter rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-twitter m-0"></i>
</a>
<a href="#" class="btn btn-linkedin rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-linkedin m-0"></i>
</a>
<a href="#" class="btn btn-vimeo rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-vimeo m-0"></i>
</a>
<a href="#" class="btn btn-youtube rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-youtube m-0"></i>
</a>


<!-- small : remove .rounded-circle for squared -->
<a href="#" class="btn btn-sm btn-facebook rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-facebook m-0"></i>
</a>
<a href="#" class="btn btn-sm btn-twitter rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-twitter m-0"></i>
</a>
<a href="#" class="btn btn-sm btn-linkedin rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-linkedin m-0"></i>
</a>
<a href="#" class="btn btn-sm btn-vimeo rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-vimeo m-0"></i>
</a>
<a href="#" class="btn btn-sm btn-youtube rounded-circle transition-hover-top mb-2" rel="noopener" target="_blank">
	<i class="fi fi-social-youtube m-0"></i>
</a>

Mobile : Icon Only

Text is hidden on mobile devices, only the icon visible
Using .rounded-circle-xs and text wrapped inside <span>, text is hidden on mobile devices, remaining the icon only.

My Account
Orders (2 pages) My Favourites (3) Account Settings
Simple Squared
view code 

<!--

	1. Using .rounded-circle-xs and a combination of .group-icon,
	the text will be hidden on mobile deivce, only the icon visible.

-->
<a href="#" id="ddPrj_demo" class="btn btn-sm rounded-circle-xs btn-primary btn-pill" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
	<span class="group-icon">
		<i class="fi fi-menu-dots"></i>
		<i class="fi fi-arrow-down"></i>
	</span>
	<span>Projects</span>
</a>

<div aria-labelledby="ddPrj_demo" class="prefix-link-icon prefix-icon-dot dropdown-menu dropdown-menu-clean dropdown-click-ignore shadow-none p-0 mt-0 bg-transparent fs--15 w--200">
	<div class="list-unstyled shadow-lg mt--20 bg-white rounded">
		<div class="dropdown-header">
			My Account
		</div>

		<div class="dropdown-divider"></div>

		<div class="scrollable-vertical max-h-50vh">

			<a href="#!" class="dropdown-item text-truncate font-weight-light active">
				Orders <small>(2 pages)</small>
			</a>
			<a href="#!" class="dropdown-item text-truncate font-weight-light">
				My Favourites <small>(3)</small>
			</a>
			<a href="#!" class="dropdown-item text-truncate font-weight-light">
				Account Settings
			</a>

		</div>

	</div>
</div>




<!--

	2. Simple, without dropdown

-->
<a href="#!" class="btn btn-sm rounded-circle-xs btn-danger btn-pill">
	<i class="fi fi-print"></i>
	<span>Simple</span>
</a>



<!--

	3. Squared

-->
<a href="#!" class="btn btn-sm btn-secondary">
	<i class="fi fi-arrow-download m-0-md"></i>
	<span class="d-none d-lg-inline-block">Squared</span>
</a>

Various

Download on the App Store Download on the Play Store
view code 

<!-- App Store -->
<a href="#!" class="btn btn-dark rounded-xl transition-hover-top">
	<i class="float-start">
		<svg height="32" viewBox="0 0 90 90">
			<path fill="#ffffff" d="M49.645 6.817c3.232-3.8 8.695-6.627 13.203-6.817.575 5.279-1.541 10.565-4.669 14.374-3.133 3.802-8.261 6.764-13.294 6.369-.684-5.165 1.851-10.551 4.76-13.926zm25.646 72.01c-3.741 5.485-7.61 10.938-13.718 11.053-6.012.114-7.938-3.571-14.799-3.571-6.866 0-9.016 3.457-14.69 3.686-5.897.222-10.382-5.926-14.152-11.387-7.703-11.168-13.585-31.576-5.677-45.35 3.916-6.84 10.934-11.167 18.537-11.282 5.792-.107 11.263 3.917 14.799 3.917 3.544 0 10.185-4.831 17.165-4.122 2.922.121 11.123 1.181 16.391 8.912-.417.274-9.789 5.745-9.676 17.141.114 13.614 11.891 18.137 12.029 18.199-.108.32-1.884 6.459-6.209 12.804z"></path>
		</svg>
	</i>

	<span class="float-start text-align-start px-2">
		<span class="d-block line-height-1 fs--13">Download on the</span>
		<span class="d-block line-height-1 fs--20 pt-1">App Store</span>
	</span>
</a>

<!-- Play Store -->
<a href="#!" class="btn btn-dark rounded-xl transition-hover-top">
	<i class="float-start">
		<svg height="32" viewBox="0 0 512 512">
			<path fill="#ffffff" d="M99.617 8.057c-11.664-7.537-25.674-9.815-38.815-6.713l230.932 230.933 74.846-74.846-266.963-149.374zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877-235.877-235.879zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711l-230.918 230.918c3.786.891 7.639 1.371 11.492 1.371 9.522 0 19.011-2.708 27.31-8.07l266.965-149.372-74.849-74.847z"></path>
		</svg>
	</i>

	<span class="float-start text-align-start px-2">
		<span class="d-block line-height-1 fs--13">Download on the</span>
		<span class="d-block line-height-1 fs--20 pt-1">Play Store</span>
	</span>
</a>
Jump To