"Responsive Pure CSS Tabs"
Bootstrap 3.3.0 Snippet by buildinseo

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-8"> <div class="tab_container col-md-12"> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1"><i class="fa fa-code"></i><span>Signup for Specials</span></label> <input id="tab2" type="radio" name="tabs"> <label for="tab2"><i class="fa fa-pencil-square-o"></i><span>Schedule A Free Consultation </span></label> <input id="tab3" type="radio" name="tabs"> <label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Book an Appointment</span></label> <section id="content1" class="tab-content"> <h3>Signup for Specials</h3> <p>Tab 1 Content.</p> </section> <section id="content2" class="tab-content"> <h3>Schedule A Free Consultation</h3> <p>Tab 2 content.</p> </section> <section id="content3" class="tab-content"> <h3>Book an Appointment</h3> <p>Tab 3 content</p> </section> </div> </div>
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body { font-family: sans-serif; background: #f6f9fa; } h1 { color: #ccc; text-align: center; } a { color: #ccc; text-decoration: none; outline: none; } /*Fun begins*/ .tab_container { width: 100%; margin: 0 auto; padding-top: 70px; position: relative; } input, section { clear: both; padding-top: 10px; display: none; } label { font-weight: 700; font-size: 18px; display: block; float: left; width: 33%; color: #757575; cursor: pointer; text-decoration: none; text-align: center; background: #fff; border-bottom: 0px solid #d5c5a3; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5 { display: block; padding: 20px; background: #fff; color: #999; border: 2px solid #d5c5a3; } .tab_container .tab-content p, .tab_container .tab-content h3 { -webkit-animation: fadeInScale 0.7s ease-in-out; -moz-animation: fadeInScale 0.7s ease-in-out; animation: fadeInScale 0.7s ease-in-out; } .tab_container .tab-content { text-align: center; } .tab_container [id^="tab"]:checked + label { color: #fff; background-color: #80439a; } .tab_container [id^="tab"]:checked + label .fa { color: #0CE; } label .fa { font-size: 1.3em; margin: 0 0.4em 0 0; } /*Media query*/ @media only screen and (max-width: 930px) { label span { font-size: 14px; } label .fa { font-size: 14px; } } @media only screen and (max-width: 768px) { label span { display: none; } label .fa { font-size: 16px; } .tab_container { width: 98%; } } /*Content Animation*/ @keyframes fadeInScale { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

Related: See More


Questions / Comments: