| Server IP : 104.21.80.248 / Your IP : 172.71.28.155 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : E:/Inetpub/www/news/datacenter/admin/template-pages/ |
Upload File : |
<div class="row">
<div class="col-xl-12">
<div class="breadcrumb-holder">
<h1 class="main-title float-left">Buttons</h1>
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Buttons</li>
</ol>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Default Buttons</h3>
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. <a target="_blank" href="http://getbootstrap.com/docs/4.0/components/buttons/">(more details)</a>
</div>
<div class="card-body">
<a role="button" class="btn btn-primary" href="#">Primary</a>
<a role="button" class="btn btn-secondary" href="#">Secondary</a>
<a role="button" class="btn btn-success" href="#">Success</a>
<a role="button" class="btn btn-danger" href="#">Danger</a>
<a role="button" class="btn btn-warning" href="#">Warning</a>
<a role="button" class="btn btn-info" href="#">Info</a>
<a role="button" class="btn btn-light" href="#">Light</a>
<a role="button" class="btn btn-dark" href="#">Dark</a>
<a role="button" class="btn btn-link">Link</a>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Outline buttons</h3>
Replace the default modifier classes with the <i>.btn-outline-*</i> ones to remove all background images and colors on any button. (<a target="_blank" href="http://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons">more info</a>)
</div>
<div class="card-body">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
</div><!-- end card-->
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Button sizes</h3>
Fancy larger or smaller buttons? Add <i>.btn-lg</i> or <i>.btn-sm</i> for additional sizes. <a target="_blank" href="http://getbootstrap.com/docs/4.0/components/buttons/#sizes">(more info)</a>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-danger btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-danger btn-sm">Small button</button>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Button group</h3>
Wrap a series of buttons with <i>.btn</i> in <i>.btn-group</i>. <a target="_blank" href="http://getbootstrap.com/docs/4.0/components/button-group/">(more info)</a>
</div>
<div class="card-body">
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" role="group" aria-label="Basic example">
<a role="button" class="btn btn-secondary" href="#">Left</a>
<a role="button" class="btn btn-secondary" href="#">Middle</a>
<a role="button" class="btn btn-secondary" href="#">Right</a>
</div>
<div class="input-group">
<span class="input-group-addon" id="btnGroupAddon">@</span>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Nesting</h3>
Place a .btn-group within another <i>.btn-group</i> when you want dropdown menus mixed with a series of buttons. <a target="_blank" href="http://getbootstrap.com/docs/4.0/components/button-group/#nesting">(more info)</a>
</div>
<div class="card-body">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a role="button" href="#" class="btn btn-secondary">1</a>
<a role="button" href="#" class="btn btn-secondary">2</a>
<div class="btn-group" role="group">
<a id="btnGroupDrop1" role="button" href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Button labels</h3>
Insert <i>.btn-label</i> class inside buttons and any icon inside it. Add <i>.btn-label-right</i> class if you want to put icon on right side<span>
</div>
<div class="card-body">
<div class="button-list">
<a role="button" href="#" class="btn btn-primary"><span class="btn-label"><i class="fa fa-check"></i></span>Primary</a>
<a role="button" href="#" class="btn btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</a>
<a role="button" href="#" class="btn btn-info"><span class="btn-label"><i class="fa fa-exclamation"></i></span>Info</a>
<a role="button" href="#" class="btn btn-warning"><span class="btn-label"><i class="fa fa-warning"></i></span>Warning</a>
<a role="button" href="#" class="btn btn-primary"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</a>
<a role="button" href="#" class="btn btn-success">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></a>
</div>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Button with icons</h3>
Icons buttons only
</div>
<div class="card-body">
<div class="button-list">
<a role="button" href="#" class="btn btn-primary"><i class="fa fa-check"></i></a>
<a role="button" href="#" class="btn btn-danger"><i class="fa fa-times"></i></a>
<a role="button" href="#" class="btn btn-info"><i class="fa fa-exclamation"></i></a>
<a role="button" href="#" class="btn btn-warning"><i class="fa fa-warning"></i></a>
<a role="button" href="#" class="btn btn-primary"><i class="fa fa-arrow-left"></i></a>
<a role="button" href="#" class="btn btn-success"><i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div><!-- end card-->
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="card mb-3">
<div class="card-header">
<h3><i class="fa fa-check-square-o"></i> Social buttons</h3>
Use class <i>.btn-*social-icon</i> to the parent.
</div>
<div class="card-body">
<div class="button-list">
<a role="button" href="#" class="btn btn-facebook">
<i class="fa fa-facebook"></i>
</a>
<a role="button" href="#" class="btn btn-twitter">
<i class="fa fa-twitter"></i>
</a>
<a role="button" href="#" class="btn btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a role="button" href="#" class="btn btn-dribbble">
<i class="fa fa-dribbble"></i>
</a>
<a role="button" href="#" class="btn btn-googleplus">
<i class="fa fa-google-plus"></i>
</a>
<a role="button" href="#" class="btn btn-instagram">
<i class="fa fa-instagram"></i>
</a>
<a role="button" href="#" class="btn btn-pinterest">
<i class="fa fa-pinterest"></i>
</a>
<a role="button" href="#" class="btn btn-dropbox">
<i class="fa fa-dropbox"></i>
</a>
<a role="button" href="#" class="btn btn-flickr">
<i class="fa fa-flickr"></i>
</a>
<a role="button" href="#" class="btn btn-tumblr">
<i class="fa fa-tumblr"></i>
</a>
<a role="button" href="#" class="btn btn-skype">
<i class="fa fa-skype"></i>
</a>
<a role="button" href="#" class="btn btn-youtube">
<i class="fa fa-youtube"></i>
</a>
<div class="mb30"></div>
<a role="button" href="#" class="btn btn-facebook">
<i class="fa fa-facebook m-r-5"></i> Facebook
</a>
<a role="button" href="#" class="btn btn-twitter">
<i class="fa fa-twitter m-r-5"></i> Twitter
</a>
<a role="button" href="#" class="btn btn-linkedin">
<i class="fa fa-linkedin m-r-5"></i> Linkedin
</a>
<a role="button" href="#" class="btn btn-dribbble">
<i class="fa fa-dribbble m-r-5"></i> Dribbble
</a>
<a role="button" href="#" class="btn btn-googleplus">
<i class="fa fa-google-plus m-r-5"></i> Google+
</a>
<a role="button" href="#" class="btn btn-instagram">
<i class="fa fa-instagram m-r-5"></i> Instagram
</a>
<a role="button" href="#" class="btn btn-pinterest">
<i class="fa fa-pinterest m-r-5"></i> Pinterest
</a>
<a role="button" href="#" class="btn btn-dropbox">
<i class="fa fa-dropbox m-r-5"></i> Dropbox
</a>
<a role="button" href="#" class="btn btn-flickr">
<i class="fa fa-flickr m-r-5"></i> Flickr
</a>
<a role="button" href="#" class="btn btn-tumblr">
<i class="fa fa-tumblr m-r-5"></i> Tumblr
</a>
<a role="button" href="#" class="btn btn-skype">
<i class="fa fa-skype m-r-5"></i> Skype
</a>
<a role="button" href="#" class="btn btn-youtube">
<i class="fa fa-youtube m-r-5"></i> Youtube
</a>
</div>
</div>
</div><!-- end card-->
</div>
</div>