Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="appointment_mobile">
    <div class="container appointment_area">
        <div class="row contacts_area">
            <div class="col-xs-12">
                <h2 class="contacts_head common_head">Контактные данные</h2>
            </div>

            <div class="col-xs-12 col-sm-6">
                <a class="common_button active but1" href="#">Записать себя</a>
            </div>

            <div class="col-xs-12 col-sm-6">
                <a class="common_button but2" href="#">Записать другого человека</a>
            </div>

            <div class="col-xs-12 col-md-9 contacts_form_outer">
                <form class="contacts_form" action="POST" method="">
                    <input class="common_field" name="last_name" type="text" placeholder="Фамилия">
                    <input class="common_field" name="first_name" type="text" placeholder="Имя">
                    <input class="common_field" name="middle_name" type="text" placeholder="Отчество">
                    <input class="common_field" name="phone" type="text" placeholder="Номер телефона">
                    <input class="common_field" name="birthday" type="text" placeholder="Дата рождения">
                    <button class="fld_submit common_button" type="submit">Записаться</button>
                </form>
            </div>
        </div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');




/*************************************************************************************************************** GLOBAL_blocks : contacts_form_outer */
.appointment_mobile .contacts_form_outer{
	margin-top: 4px;
}

	.appointment_mobile .contacts_form{

	}

	.appointment_mobile .contacts_form input{
		margin-bottom: 4px;
	}

	.appointment_mobile .contacts_area .contacts_form .fld_submit{
		margin-top: 8px;
		border: none;
		background: #cc292b;
		display: block;
		width: 100%;

		color: #fff
	}

/*************************************************************************************************************** GLOBAL_blocks : contacts_area */
.appointment_mobile .contacts_area{

}
	.contacts_area .h2{

	}

	.appointment_mobile .contacts_area .common_button.active:hover,
	.appointment_mobile .contacts_area .common_button:hover{
		background: #b72021;

		color: #fff;
	}

	.appointment_mobile .contacts_area .common_button.active {
		background: #cc292b;

		color: #fff;
	}

	.appointment_mobile .contacts_area .common_button{
		background: #f1ebe7;
		margin-bottom: 4px;

		color: #8e8e8e;
		text-transform: none;
	}



/*************************************************************************************************************** GLOBAL_blocks : common_button */
.appointment_mobile .common_button:hover{
	text-decoration: none;
	background-color: #b72021;
}

.appointment_mobile .common_button{
	display: block;
	border-radius: 3px;
	min-height: 38px;
	overflow: hidden;
	background: #cc292b;
	padding: 0 10px;

	color: #fff;
	line-height: 38px;
	text-transform: uppercase;
}


/*************************************************************************************************************** MEDIA_QUERIES */
@media (min-width: 480px) {
	body{
		background: orange !important;
	}
}

@media (min-width: 768px) {
	body{
		background: magenta !important;
	}
}

@media (min-width: 992px) {
	body{
		background: cyan...