About a code Bootstrap 4 Ecommerce Shopping Cart. Bootstrap 4 ecommerce shopping cart with item summary. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes. Bootstrap 4 navbar with centered logo. Bootstrap 4.1.1 landing carousel. Get Shit Done Kit. Vue Light Bootstrap Dashboard PRO.
Button Styles
Bootstrap 4 provides different styles of buttons:
Example
<button type='button'>Primary</button>
<button type='button'>Secondary</button>
<button type='button'>Success</button>
<button type='button'>Info</button>
<button type='button'>Warning</button>
<button type='button'>Danger</button>
<button type='button'>Dark</button>
<button type='button'>Light</button>
<button type='button'>Link</button>
The button classes can be used on <a>, <button>, or <input> elements:
Example
<button type='button'>Button</button>
<input type='button' value='Input Button'>
<input type='submit' value='Submit Button'>
Why do we put a # in the href attribute of the link?
Since we do not have any page to link it to, and we do not want to get a '404' message, we put # as the link. In real life it should of course been a real URL to the 'Search' page.
Button Outline
Bootstrap 4 provides eight outline/bordered buttons:
Example
<button type='button'>Secondary</button>
<button type='button'>Success</button>
<button type='button'>Info</button>
<button type='button'>Warning</button>
<button type='button'>Danger</button>
<button type='button'>Dark</button>
<button type='button'>Light</button>
Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
Example
<button type='button'>Default</button>
<button type='button'>Small</button>
Block Level Buttons
Add class .btn-block to create a block level button that spans the entire width of the parent element.
Example
Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the disabled attribute makes a button unclickable. Note that <a> elements do not support the disabled attribute and must therefore use the .disabled class to make it visually appear disabled.
Example
<button type='button' disabled>Disabled Primary</button>
<a href='#'>Disabled Link</a>
Spinner Buttons
You can also add 'spinners' to a button, which you will learn more about in our BS4 Spinners Tutorial:
Example
<span></span>
</button>
<button>
<span></span>
Loading..
</button>
<button disabled>
<span></span>
Loading..
</button>
<button disabled>
<span></span>
Loading..
</button>
Bootstrap 4
Try it Yourself »Bootstrap Page Layout
Mobile devices don't exist only for checking your social network accounts. All kinds of websites, from shops to forums, can be made quick and fun to use on a phone or tablet, if you implement the right UI modifications. We present you with a free template - a fully responsive and pretty shopping cart.
The Template
We decided on a rather simple and clean design for this template, to make it easier for you to customize it and suit it to fit your personal style and desired functionality.
Because we want the page to adapt nicely to all types of screen sizes we've based it on Twitter's Bootstrap framework.
We've also used the neat built-in features Bootstrap offers, to make these cool pop-up buttons. Make sure to run the demo on your mobile phone and see how the design adapts to the smaller screen.
The PSD
As always, the PSD file is available from our free and awesome member area.
Free for Commercial Use
Feel free to use this template in both personal and commercial projects. We hope it comes in handy and we'd love to see you play around with it. Just don't forget to share the results with us! And with your friends, too! Enjoy :)
Bootstrap Studio
The revolutionary web design tool for creating responsive websites and apps.
Learn more