bootstrap-social

Social network buttons for Bootstrap 4

bootstrap-social is a add-on to Bootstrap to add utility to its button system to integrate painlessly social networks.

btn-social
btn-social-icon
btn-<your network name>

Bootstrap

bootstrap-social works with the Bootstrap button system.
bootstrap-social uses the right color of the social network. You can use FontAwesome tags to add the image to your button.

Show example

Variation

bootstrap-social was design to suit your needs and thus comes with different flavours (classic or icon only).
Using Bootstrap you can have them in different sizes, outlined, as a block or vertical

View details

Social networks

The main networks are available. bootstrap-social uses the appropriate color as background or outline. You can choose FontAwesome for the icons but it works with any image or tag

Example

a short example of bootstrap-social

It shows 2 buttons to login using oAuth. It implements one using FontAweseme icons and the other one an image

                        <a class="btn btn-block btn-social btn-facebook">
    <i class="fab fa-facebook-f"></i>
    Login via Facebook
</a>
<a  href="#" class="btn btn-block btn-social btn-google">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png">
    Login via Google
</a>
                    

Variations

Different flavours

Classic

Add btn-social to have a classic button with text + btn-<your network name>

                        <a href="#" class="btn btn-social btn-twitter">
    <i class="fab fa-twitter"></i>
    Login via Twitter
</a>
                        
                    

Icon only

Should you need only a square button dispalying the icon of you favorite network, use btn-social-icon + btn-<your network name>

                        <a href="#" class="btn btn-social-icon btn-github">
	<i class="fab fa-github"></i>
</a>
                        
                    

Bootstrap features

As it uses Bootstrap, you can all the button features provided.

See Bootstrap documentation for further details

Button group

Wrap a series of buttons with .btn in .btn-group.

Outline

Replace the default modifier classes with the .btn-outline-*

Sizing

Add .btn-lg or .btn-sm for additional sizes