<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>block level buttons in bootstrap Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/block-level-buttons-in-bootstrap/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/block-level-buttons-in-bootstrap/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Thu, 19 Aug 2021 10:21:32 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>Bootstrap: Component&#8221;Buttons&#8221;</title>
		<link>https://www.scmgalaxy.com/tutorials/bootstrap-componentbuttons/</link>
					<comments>https://www.scmgalaxy.com/tutorials/bootstrap-componentbuttons/#respond</comments>
		
		<dc:creator><![CDATA[vikashdev k]]></dc:creator>
		<pubDate>Thu, 19 Aug 2021 10:21:29 +0000</pubDate>
				<category><![CDATA[Bootstrap]]></category>
		<category><![CDATA[active /disabled buttons in bootstrap]]></category>
		<category><![CDATA[active button in bootstrap]]></category>
		<category><![CDATA[block level buttons in bootstrap]]></category>
		<category><![CDATA[bootstrap 4]]></category>
		<category><![CDATA[button color in bootstrap]]></category>
		<category><![CDATA[button outline in bootstrap]]></category>
		<category><![CDATA[button size in bootstrap]]></category>
		<category><![CDATA[button style in bootstrap]]></category>
		<category><![CDATA[button width in bootstrap]]></category>
		<category><![CDATA[buttons in bootstrap]]></category>
		<category><![CDATA[disable button in bootstrap]]></category>
		<category><![CDATA[Guide]]></category>
		<category><![CDATA[Process]]></category>
		<category><![CDATA[spinner buttons in bootstrap]]></category>
		<category><![CDATA[spinner used in active/disabled buttons in bootstrap]]></category>
		<category><![CDATA[Tutorial]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=8100</guid>

					<description><![CDATA[<p>Bootstrap 4 provides users with different styles of buttons. Button Color. Button Outline. Button Size. Block level Buttons. Active/Disabled Buttons. [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/bootstrap-componentbuttons/">Bootstrap: Component&#8221;Buttons&#8221;</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Bootstrap 4 provides users with different styles of buttons.</p>



<ul class="wp-block-list"><li>Button Color.</li><li>Button Outline.</li><li>Button Size.</li><li>Block level Buttons.</li><li>Active/Disabled Buttons.</li><li>Spinner Buttons.</li></ul>



<h2 class="wp-block-heading">Button color:</h2>



<p class="wp-block-paragraph"> Use the background-color property to change the background color of a button.</p>



<script src="https://gist.github.com/vikash-cotocus/dcbc78bc4ff82d91f1e2c911fa5cf258.js"></script>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="612" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color-1024x612.png" alt="" class="wp-image-8101" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color-1024x612.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color-768x459.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color-1536x918.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/button-color.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Button Outline:</h2>



<p class="wp-block-paragraph">The button outline style removes all background images or colors from a button and gives it a lighter look.</p>



<script src="https://gist.github.com/vikash-cotocus/f94021faada89a6039d7355eaa4384a2.js"></script>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="612" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1-1024x612.png" alt="" class="wp-image-8103" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1-1024x612.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1-768x459.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1-1536x918.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/btn-btn-outline-primary-1.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Button Sizes:</h2>



<p class="wp-block-paragraph">This will indicate to you the size of the button.</p>



<ul class="wp-block-list"><li>Default</li><li>Large (btn-lg)</li><li>Small (btn-sm)</li></ul>



<script src="https://gist.github.com/vikash-cotocus/77a93cbdb8b05f2d35277a61e2afebca.js"></script>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="612" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb-1024x612.png" alt="" class="wp-image-8104" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb-1024x612.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb-768x459.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb-1536x918.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bb.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Block Level Buttons:</h2>



<p class="wp-block-paragraph">The .btn-block class is used to create a block-level button that spans the entire width of the parent elements.</p>



<script src="https://gist.github.com/vikash-cotocus/64af094f26d407540dcb86ba588eb6ec.js"></script>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="612" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb-1024x612.png" alt="" class="wp-image-8105" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb-1024x612.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb-768x459.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb-1536x918.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbb.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Active/Disabled Buttons:</h2>



<p class="wp-block-paragraph">A button can be set to an active (clickable) or a disabled (unclickable) state.</p>



<script src="https://gist.github.com/vikash-cotocus/b85ae67b42d2e6bfa464ee3c4ec7ad47.js"></script>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="612" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb-1024x612.png" alt="" class="wp-image-8106" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb-1024x612.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb-768x459.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb-1536x918.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbb.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Spinner Buttons:</h2>



<p class="wp-block-paragraph">You can also add &#8220;spinners&#8221; to a button.</p>



<script src="https://gist.github.com/vikash-cotocus/3ee5e80942b8cfadae7fe62fc88bd349.js"></script>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="612" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb-1024x612.png" alt="" class="wp-image-8107" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb-1024x612.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb-768x459.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb-1536x918.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/bbbbbbbbbbb.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/bootstrap-componentbuttons/">Bootstrap: Component&#8221;Buttons&#8221;</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/bootstrap-componentbuttons/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
