Bootstrap Editor use requires a larger screen resolution. Resize your browser, or use a device with a larger screen (desktop or laptop). You can preview at smaller widths (phone / tablet), but the editing capability is disabled.

Switch to render view

javascript

css

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  border: 0;
  border-bottom-color: transparent;
}

span.round-tabs{
  width: 70px;
  height: 70px;
  line-height: 70px;
  display: inline-block;
  border-radius: 100px;
  background: #eee;
  z-index: 2;
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 25px;
}

.nav-tabs > li.active > a span.round-tabs{
  background: #fafafa;
}
.nav-tabs > li {
  width: 20%;
}

li:after {
  content: " ";
  position: absolute;
  left: 45%;
  opacity:0;
  margin: 0 auto;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom-color: #ddd;
  transition:0.1s ease-in-out;
}
li.active:after {
  content: " ";
  position: absolute;
  left: 45%;
  opacity:1;
  margin: 0 auto;
  bottom: 0px;
  border: 10px solid transparent;
  border-bottom-color: #ddd;
}
.nav-tabs > li a{
  width: 70px;
  height: 70px;
  margin: 20px auto;
  border-radius: 100%;
  padding: 0;
}

.nav-tabs > li a:hover{
 background: transparent;
}

.tab-pane{
 position: relative;
 padding-top: 50px;
}

@media( max-width : 768px ){

span.round-tabs {
     font-size:16px;
     width: 50px;
     height: 50px;
     line-height: 50px;
    }
    
    .nav-tabs > li a {
     width: 50px;
     height: 50px;
     line-height:50px;
    }
    
    li.active:after {
     content: " ";
     position: absolute;
     left: 35%;
    }

}

html

container

row

8.3%

12.5%

25%

33%

41.6%

50%

58.3%

66%

75%

83.3%

91.6%

100%

Hero

well

<form>

h1

h2

h3

h4

small

icon

table

<hr>

label

badge

[media]

"Lorem ipsum.."