Bootstrap html snippet. Profile options

HTML code

Clean, semantic HTML that powers this Bootstrap 3.2.0 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container bootstrap snippets bootdey">
<div class="col-md-10 text-center">
    <div class="jumbotron">
        <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-circle img-thumbnail img-user" alt="">    
        <div class="content">
            <ul class="brands brands-inline hidden-xs">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>   
            <h2 class="name">El Grone's</h2>
            <ul class="brands brands-inline hidden-xs">
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>       
        </div>
        <!-- Slideshow start -->                          
        <div class="carousel slide vertical" data-ride="carousel">
            <div class="carousel-inner">
                <!-- Slideshow item 1 active --> 
                <div class="item next left"><h3>I <i class="fa fa-heart"></i> webdesign</h3></div>
                <!-- Slideshow item 2 -->     
                <div class="item"><h3>Creative coder <i class="fa fa-code icon"></i></h3></div>
                <!-- Slideshow item 3 -->   
                <div class="item active left"><h3><i class="fa fa-trophy"></i> Awesome designer</h3></div>
            </div>
        </div>
        <!-- Slideshow end -->
        <div class="row">
            <a href="#" class="btn btn-info btn-lg text-success" >
                <i class="glyphicon glyphicon-share"></i> Option one
            </a>
            <a href="#" class="btn btn-info btn-lg text-success" >
                <i class="glyphicon glyphicon-check"></i>Option two
            </a>
        </di>
    </div>
</div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.2.0 to keep the design, spacing, and responsiveness consistent.

body {
    background: #2E95EF;
    background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF));
    padding-top: 20px;
}


.img-user{
    width:300px; 
    height:300px;
}

.name{
    text-shadow: 1px 1px 0 #888;
    color: #FFFFFF;
    font-family: 'Montserrat';
}

.jumbotron {
    margin: 0;
    background: #2E95EF;
    background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF));
}

.jumbotron img {
    margin: 0 auto 0 auto;
    max-height: 350px;
    margin-bottom: 15px;
}

.brands li:hover{
    background:#FFFFFF;
}

.brands li:hover .fa{
    color:#000000;
}

.brands {
    list-style: none;
    padding-left: 0;
}

.brands {
    display: inline;
}

.brands-inline  li {
    display: inline-block;
    margin-right: 5px;
}
.brands  li {
    margin: 0 0 8px;
}

.brands  li  a {
    background-color: transparent;
    color: #FFFFFF;
    border-top: 3px solid #16A085;
}
.brands  li  a {
    text-align: center;
    display: inline-block;
    font-size: 20px;
    padding-top: 11px;
    width: 50px;
    height: 50px;
}

.content h2 {
    display: inline;
    padding: 0 15px 0 15px;
    font-size: 78px;
}

.vertical .carousel-inner {
    height: 100%;
}

.carousel-inner {
    margin-bottom: 15px;
}

.jumbotron .btn {
    margin-right: 15px;
}