.getin {
background: url("./source/Group.png") no-repeat left;
background-size: 100%;
/* background-position: left top; */
width: 100%;
height: 439px;
}
.label {
float: left
}
.span {
display: block;
overflow: hidden;
/* padding: 0 4px 0 6px */
}
.input {
width: 100%;
}
input[type=text] {
width: 100%;
margin: 2px 0;
box-sizing: border-box;
border: none;
border-bottom: 1px solid black;
background: linear-gradient(270deg, #C4C4C4 90.12%, rgba(196, 196, 196, 0) 100%);
color: black;
font-weight: 600;
}
.getinfont {
font-family: Oswald;
font-style: normal;
font-weight: 600;
font-size: 47px;
color: #FFFFFF;
text-align: left;
}
.contbottom {
margin: 0% 15% 0% 0%;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 22px;
text-transform: capitalize;
color: #333333;
}
.btn-git {
width: 139px;
height: 38px;
border: 1px solid #333333;
text-align: center;
box-sizing: border-box;
}
.btn-text {
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 22px;
text-align: center;
color: #333333;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js">
</head>
<body>
<div class="Touch_cont row ">
<div class=" jumbotron getin">
<!--dock to left side-->
<!--Dock to right side-->
<div class="Touch_details col-sm-5 ml-auto">
<p class="getinfont">We’d love to hear from you!</p>
<form action="email.php" method="POST" id="GetInTouch_form">
<div class="contbottom">
<div class="input-group mb-3">
<div class="input-group-prepend ">
<span id="inputGroup-sizing-default " style="margin:15px 50px -80px 0px">Name:</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span id="inputGroup-sizing-default" style="margin:15px 13px -80px 0px">Company:</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span id="inputGroup-sizing-default" style="margin:15px 48px -80px 0px">Phone:</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span id="inputGroup-sizing-default" style="margin:15px 8px 0px 0px">Message: </span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div class="btn-git contbottom" style="float:right">
<a href="./contactUs/contactUs.html" class=" btn btn-sm btn-text" s>Submit</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm not able to make it mobile responsive, please help. Every thing is included in the post, all the code and css bootstrap given.
so i make your code for responsive for the mobile device. I changed background-size: cover; and height: 100vh; and also added media query to make the heading text little bit smaller on small device. let me know if you have any question.
.getin {
background: url("./source/Group.png") no-repeat left;
background-size: cover;
/* background-size: 100%;*/
/* background-position: left top; */
width: 100%;
height: 100vh;
}
.label {
float: left
}
.span {
display: block;
overflow: hidden;
/* padding: 0 4px 0 6px */
}
.input {
width: 100%;
}
input[type=text] {
width: 100%;
margin: 2px 0;
box-sizing: border-box;
border: none;
border-bottom: 1px solid black;
background: linear-gradient(270deg, #C4C4C4 90.12%, rgba(196, 196, 196, 0) 100%);
color: black;
font-weight: 600;
}
.getinfont {
font-family: Oswald;
font-style: normal;
font-weight: 600;
font-size: 47px;
color: #FFFFFF;
text-align: left;
}
.contbottom {
margin: 0% 15% 0% 0%;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 22px;
text-transform: capitalize;
color: #333333;
}
.btn-git {
width: 139px;
height: 38px;
border: 1px solid #333333;
text-align: center;
box-sizing: border-box;
}
.btn-text {
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 22px;
text-align: center;
color: #333333;
}
#media screen and (max-width: 576px){
.getinfont {
font-size: 40px;
}
}/*max-width:576px*/
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js">
</head>
<body>
<div class="container-fluid">
<div class="Touch_cont row ">
<div class=" jumbotron getin">
<!--dock to left side-->
<!--Dock to right side-->
<div class="Touch_details col-sm-5 ml-auto">
<p class="getinfont">We’d love to hear from you!</p>
<form action="email.php" method="POST" id="GetInTouch_form">
<div class="contbottom">
<div class="input-group mb-3">
<div class="input-group-prepend ">
<span id="inputGroup-sizing-default " style="margin:15px 50px -80px 0px">Name:</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span id="inputGroup-sizing-default" style="margin:15px 13px -80px 0px">Company:</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span id="inputGroup-sizing-default" style="margin:15px 48px -80px 0px">Phone:</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span id="inputGroup-sizing-default" style="margin:15px 8px 0px 0px">Message: </span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div class="btn-git contbottom" style="float:right">
<a href="./contactUs/contactUs.html" class=" btn btn-sm btn-text" s>Submit</a>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?
Im using bootstrap 3 with flexbox in order to achieve the output. To explain, I am creating a login screen where the left div has a background-image that completely covers the div and on the right side is the form container together with it form contents. I've provided a snippet to show what I am trying to do.
#page-login-template {
margin-top: -32px;
.column-wrapper{
display:flex;
}
.login-left {
background-image: url("assets/images/web_login#2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.login-right {
padding: 0 100px;
.login-logo {
padding:99px 0;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],[type=text]{
border-right:0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left:0;
border-top:1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
i{
font-size:18px;
}
.btn-login{
height:54px;
font-size:16px;
font-family:Poppins;
color:#fff;
background:#0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover{
background:#0570B6;
}
}
.form-container-2{
padding:20px 0;
p{
font-family: Poppins;
font-size: 12px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
.form-container-3{
padding-top:180px;
p{
font-family: Poppins;
font-size: 11px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
}
}
<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-lg-7 login-left"></div>
<div class="col-lg-5 login-right">
<div class="row login-logo text-center">
<img src='<?= get_stylesheet_directory_uri() . '/assets/images/logo/logo#2x.png' ?>' width="50%">
</div>
<h4 class="text-center">Login to My Account</h4>
<div class="row form-container">
<form class="form-horizontal">
<div class="row">
<div class="form-part-group col-lg-12">
<input id="email" type="email" class="form-control form-input-group email-input" data-error-required="This field is required" data-class-focus="email-input" placeholder="Email">
<div id="email" class="error-block"></div>
</div>
</div>
<div class="row form-part-group">
<div class="input-group col-lg-12 password-input">
<input id="password" type="password" class="form-control form-input-group" data-error-required="This field is required" data-class-focus="password-input" placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="row">
<div class="form-part-group col-lg-12">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</div>
</form>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>
As you can see I am controlling the height of the layout via padding the contents on the form. Is there a way to have the same output without it being dependent on the form's height.
height: 100vh;
This code can make your div same height as screen
First thing that you need to do is to set on "column-wrapper" class:
height: 100vh;
You probably need something like this, just group the div's in a way that you like:
JSFiddle
Try this. You need to set elements to height 100% or 100vh. And the right part is better to make with the flexbox.
html,
body {
height: 100%;
}
#page-login-template{
height: 100%;
}
.column-wrapper {
display: flex;
height: 100%;
}
.login-left {
background-image: url("https://source.unsplash.com/user/erondu/1600x900");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.login-logo{
padding-top:100px;
}
.login-right {
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
}
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],
[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],
[type=text] {
border-right: 0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left: 0;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
.input-group-addon i {
font-size: 18px;
}
.btn-login {
height: 54px;
font-size: 16px;
font-family: Poppins;
color: #fff;
background: #0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover {
background: #0570B6;
}
.form-container-2 {
padding: 20px 0;
}
.form-container-2 p {
font-family: Poppins;
font-size: 12px;
color: #333;
font-weight: bold;
}
.form-container-2 a {
color: #0392CC
}
.form-container-3 p {
font-family: Poppins;
font-size: 11px;
color: #333;
font-weight: bold;
}
.form-container-3 a {
color: #0392CC
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-md-7 login-left"></div>
<div class="col-md-5 login-right">
<div class="row login-logo text-center">
<img src='https://source.unsplash.com/random/200x200>' height="150">
</div>
<div class="form-container">
<h4 class="text-center">Login to My Account</h4>
<form>
<div class="form-group">
<input id="email" type="email" class="form-control form-input-group email-input"
data-error-required="This field is required" data-class-focus="email-input"
placeholder="Email">
<div id="email" class="error-block"></div>
</div>
<div class="form-group">
<input id="password" type="password" class="form-control form-input-group"
data-error-required="This field is required" data-class-focus="password-input"
placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="form-group">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</form>
</div>
<div>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>
image image2I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
Any help is greatly appreciated. Thanks!
body {
font-family: 'Poppins';
overflow: hidden;
}
.navbar-inverse {
background-color: #fff !important;
border-color: #ffffff !important;
border-bottom: 1px solid #979797 !important;
}
#media (min-width: 768px){
.navbar {
border-radius: 0px !important;
}
}
.color-1{
color: #FCB900;
}
.sidebar{
color: #FCB900;
font-size: 21px;
float: left;
padding: 10px 5px;
cursor: pointer;
margin: 0 10px;
}
.logo a{
color: #424242 !important;
}
.logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
font-weight: 600;
}
.logo-a{
padding: 0 !important;
font-size: 13px !important;
}
/* Sidebar CSS */
.sidebar-logo{
background: white;
margin: 10px;
border: 1px solid #979797;
padding: 10px 20px;
font-size: 14px;
width: 50%;
margin-left: 10%;
text-align: center;
font-weight: 600;
}
.sidebar-title{
margin-left: 10%;
font-size: 12px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fcb900;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 12px 8px 10px 25px;
text-decoration: none;
font-size: 14px;
color: #101010;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #101010;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 15px;
font-size: 25px;
margin-left: 50px;
}
.cart-icon{
font-size: 16px;
}
/*------------------------Profile Account----------------------------*/
.widget-author {
margin-bottom: 58px;
}
.author-card {
position: relative;
padding-bottom: 48px;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .09);
}
.author-card .author-card-cover {
position: relative;
width: 100%;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.author-card .author-card-cover::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0.5;
}
.author-card .author-card-cover > .btn {
position: absolute;
top: 12px;
right: 12px;
padding: 0 10px;
}
.author-card .author-card-profile {
display: table;
position: relative;
margin-top: -85px;
padding-right: 15px;
padding-bottom: 16px;
padding-left: 20px;
z-index: 5;
}
.author-card .author-card-profile .author-card-avatar, .author-card .author-card-profile .author-card-details {
display: table-cell;
vertical-align: middle;
}
.author-card .author-card-profile .author-card-avatar {
width: 85px;
border-radius: 50%;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .15);
overflow: hidden;
}
.author-card .author-card-profile .author-card-avatar > img {
display: block;
width: 100%;
}
.author-card .author-card-profile .author-card-details {
padding-top: 50px;
padding-left: 15px;
}
.author-card .author-card-profile .author-card-name {
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
}
.author-card .author-card-profile .author-card-position {
display: block;
color: #8c8c8c;
font-size: 12px;
font-weight: 600;
}
.author-card .author-card-info {
margin-bottom: 0;
padding: 0 25px;
font-size: 13px;
}
.author-card .author-card-social-bar-wrap {
position: absolute;
bottom: -18px;
left: 0;
width: 100%;
}
.author-card .author-card-social-bar-wrap .author-card-social-bar {
display: table;
margin: auto;
background-color: #fff;
box-shadow: 0 12px 20px 1px rgba(64, 64, 64, .11);
}
.btn-style-1.btn-white {
background-color: #fff;
}
.list-group-item i {
display: inline-block;
margin-top: -1px;
margin-right: 8px;
font-size: 1.2em;
vertical-align: middle;
}
.mr-1, .mx-1 {
margin-right: .25rem !important;
}
.list-group-item.active:not(.disabled) {
border-color: #e7e7e7;
background: #fff;
color: #ac32e4;
cursor: default;
pointer-events: none;
}
.list-group-flush:last-child .list-group-item:last-child {
border-bottom: 0;
}
.list-group-flush .list-group-item {
border-right: 0 !important;
border-left: 0 !important;
}
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
a.list-group-item, .list-group-item-action {
color: #404040;
font-weight: 600;
}
.list-group-item {
padding-top: 16px;
padding-bottom: 16px;
-webkit-transition: all .3s;
transition: all .3s;
border: 1px solid #e7e7e7 !important;
border-radius: 0 !important;
color: #404040;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
.list-group-item {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.125);
}
.list-group-item.active:not(.disabled)::before {
background-color: #ac32e4;
}
.list-group-item::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: transparent;
content: '';
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 15px;
}
}
#exTab1 .tab-content {
color : #FCB900;
background-color: #fff;
padding : 5px 15px;
}
#exTab2 h3 {
color : #FCB900;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* Sidebar CSS */
.navbar-inverse .navbar-nav>li>a:hover {
color: #333;
}
.banner{
background-image: url('img/banner.jpg');
background-position: center center;
background-size: 100%;
margin: 0;
width: 100%;
height: 250px;
}
#media (min-width: 320px) and (max-width: 600px) {
.logo{
border: 1px solid #fff;
}
.head{
border-bottom: 0px solid #fff !important;
}
.header-right{
display: none !important;
}
.logo-media{
background: white;
border: 1px solid #979797;
padding: 5px 20px;
font-size: 14px;
width: 50%;
text-align: center;
font-weight: 600;
}
.no-margin{
margin-top: 0px !important;
margin-bottom: 0px;
}
.icon{
position: absolute !important;
top: 11px;
right: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travelling | Account Settings </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-inverse head">
<div class="container-fluid">
<span style="" onclick="openNav()" class="sidebar">☰</span>
<div class="navbar-header logo">
<a class="logo-media" href="#">Logo</a>
</div>
<div id="mySidenav" class="sidenav">
×
<div class="sidebar-logo">
<a class="logo-a" href="#">Logo</a>
</div>
<span class="sidebar-title">My Account</span>
<span class="glyphicon glyphicon-home p-r-10"></span> Home
<span class="glyphicon glyphicon-road p-r-10"></span> My Booking
<span class="glyphicon glyphicon-envelope p-r-10"></span> Messages
<span class="glyphicon glyphicon-user p-r-10"></span> Account
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Settings</span>
Language
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="sidebar-title">Information</span>
Customer Service
<hr style="display: block; height: 1px;border: 0; border-top: 1px solid black;margin: 1em 0; padding: 0; }">
<span class="fa fa-sign-in p-r-10" aria-hidden="true"></span>Login
<span class="fa fa-user-o p-r-10" aria-hidden="true"></span>Sign Up!
</div>
<ul class="nav navbar-nav navbar-right no-margin">
<li class="icon"><span class="glyphicon glyphicon-shopping-cart color-1 cart-icon "></span></li>
<li class="header-right">Login</li>
<li class="header-right">Sign Up</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-4 pb-5">
<!-- Account Sidebar-->
<div class="author-card pb-3">
<div class="author-card-cover">
<!-- <a class="btn btn-style-1 btn-white btn-sm" href="#" data-toggle="tooltip" title="" data-original-title="You currently have 290 Reward points to spend"><i class="fa fa-award text-md"></i> 290 points</a> --></div>
<div class="author-card-profile">
<div class="author-card-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</div>
<div class="author-card-details">
<h5 class="author-card-name text-lg">Daniel Adams</h5><span class="author-card-position">Joined February 06, 2017</span>
</div>
</div>
</div>
<div class="wizard">
<nav class="list-group list-group-flush">
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Account Setting</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-heart mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">My Booking</div>
</div>
</div>
</a>
<a class="list-group-item" href="#">
<div class="d-flex justify-content-between align-items-center">
<div><i class="fe-icon-tag mr-1 text-muted"></i>
<div class="d-inline-block font-weight-medium text-uppercase">Wish List</div>
</div>
</div>
</a>
</nav>
</div>
</div>
<!-- Profile Settings-->
<div class="col-lg-8 pb-5">
<!-- <form class="row">
<div class="col-md-6">
<div class="form-group">
<label for="account-fn">First Name</label>
<input class="form-control" type="text" id="account-fn" value="Daniel" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-ln">Last Name</label>
<input class="form-control" type="text" id="account-ln" value="Adams" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-email">E-mail Address</label>
<input class="form-control" type="email" id="account-email" value="daniel.adams#example.com" disabled="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-phone">Phone Number</label>
<input class="form-control" type="text" id="account-phone" value="+7 (805) 348 95 72" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-pass">New Password</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="account-confirm-pass">Confirm Password</label>
<input class="form-control" type="password" id="account-confirm-pass">
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="custom-control custom-checkbox d-block">
<input class="custom-control-input" type="checkbox" id="subscribe_me" checked="">
<label class="custom-control-label" for="subscribe_me">Subscribe me to Newsletter</label>
</div>
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form> -->
<h1>Account Settings </h1>
<div id="exTab1">
<ul class="nav nav-pills">
<li>
Personal Information
</li>
<li>Travel
</li>
<li>Security
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane" id="1a">
<form class="row">
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="sel1" placeholder="Gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="First Name">First Name*</label>
<input class="form-control" type="text" id="account-fn" placeholder="First Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Last Name">Last Name*</label>
<input class="form-control" type="text" id="account-ln" placeholder="Last Name*" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Passport No.">Passport No.</label>
<input class="form-control" type="password" id="account-pass">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Date of Birth">Date of Birth</label>
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Country">Country</label>
<select class="selectpicker countrypicker form-control" data-flag="true" ></select>
</div>
</div>
<div class="col-12">
<hr class="mt-2 mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center">
<button class="btn btn-style-1 btn-primary" type="button" data-toast="" data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success!" data-toast-message="Your profile updated successfuly.">Update Profile</button>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h4> Change Password </h4>
<form>
<div class="form-group">
<label for="email" style="color:#2EC4B6">Current Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Current Password">
</div>
<div class="form-group">
<label for="email" style="color:#2EC4B6">New Password *</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
<button type="submit" class="btn" style="background: #FCB900; color:#fff;">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Maybe you should consider something like this! :)
.author-card-shape {
width: 85px;
height: 85px;
border-radius: 50%;
overflow: hidden;
}
.author-card-img {
max-width: 100%;
height: auto;
}
<figure class="author-card-shape">
<img class="author-card-img" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Daniel Adams">
</figure>
I'm very happy with my contact form, however the text in the message area overlaps the icon. I find this strange because it starts off on a perfect indent but as the person writes more it goes right into the icon. Can anyone help on how to fix this tiny issue. I have added a photo. My code is below:
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: calc(50% - 0.5em);
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
#media screen and (min-width: 640px){
}
#media screen and (min-width: 960px){
}
[![enter image description here][1]][1]
main {flex: 1;}
Try this snippet. I have changed the input-icon to align with your input text.
html {
box-sizing: border-box;
}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar {
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro {
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {
font-size: -.5em;
}
.row {
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .9rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right: 30px;
}
input.form-control {
padding-left: 2rem;
}
.input-wrapper {
position: relative;
}
textarea.form-control {
padding-left: 2rem;
}
.btn {
margin-right: 10em;
}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
Can someone please help me out with my bootstrap layout.
Before the browser breakpoint hits 980px the right column wraps underneath the left column, but I want it to stay in its position though with no wrapping happening.
The thing is I also require the left column to have a fixed width and the right column to not have a fixed width but possibly be able to decrease the widths of the elements in my form so they dont overlap each other when the browser/viewport is resized (My horizontal form has more elements within the same lines, but I omitted some of these overlapping elements to remain minimal for the the sake of this question).
I dont think my form-group elements have the correct col sizes...
I wish to use media queries to get around this (mine currently are working a little), so if anyone can play in my codepen that would be very helpful :)
I have a link you can modify my layout here:
http://codepen.io/krystyna93/pen/GZzqrq
body {
background-color: #ccc;
}
/* General styles */
.container {
background-color: #bbb;
font-family: arial, verdana, sans-serif;
width: 1530px;
margin: 0 auto;
}
/* Large desktop */
#media and screen (max-width: 1590px) {
.container {
width: auto;
}
}
#media and screen (min-width: 981px) and (max-width: 1530px) {
.accordion.sidebar {
width: 230px;
}
}
#media (min-width: 980px) {
.accordion.sidebar {
min-width: 200px;
max-width: 200px;
}
}
.col-md-10 {
border-left: 1px solid #4d4d4d;
padding: 0;
margin: 0;
}
.container .row.header {
color: #fff;
border-bottom: 6px solid #fff
}
.container .row.header h1 {
padding: 30px 0;
font-size: 3.5em;
font-weight: 300;
}
h2 {
color: #fff;
font-size: 32px;
}
h3 {
color: #ccc;
font-size: 30px;
padding-bottom: 10px;
}
h3.inner {
padding-left: 15px;
}
h4 {
color: #ccc;
font-size: 22px;
}
.headers {
border-top: 1px solid #ccc;
margin-top: 50px;
margin-bottom: 30px;
}
.headers h1 {
padding: 20px 0 0 0;
}
.headers p {
font-size: 1.6em;
color: #fff;
padding: 0 0 10px 0;
margin: 0;
}
/* ****** NAVIGATION SIDEBAR ********
**********************************
*/
.accordion.sidebar {
padding: 0;
background-color: #fff;
}
.panel {
border-radius: 0 !important;
border: 0;
font-family: 'Lato', Arial, sans-serif;
font-weight: 400
}
.panel-group {
border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff}
.panel-heading h4.panel-title {
border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}
.panel-heading h4.panel-title a: link {
margin-left: 10px;
text-decoration: none;
font-weight: bold;
font-size: 20px
}
.panel-heading h4.panel-title a:active {
color: #fff
}
.panel-heading h4.panel-title a:hover {
color: #FF5500
}
.panel-group .panel+.panel {
margin-top: 0px !important;
border-top: 1px solid #ccc
}
.panel.panel-default.custom .panel-heading {
background: #fff;
color: #000;
border-color: #fff
}
.panel-body {
/* padding-top: 2px !important; padding-bottom: 0px !important; */
padding: 0px !important;
border: 0
}
.panel-body ul {
margin: 0;
padding: 0
}
.panel-body ul li {
padding: 10px 0 !important;
border-bottom: 1px solid #ccc;
font-size: 1.4em
}
.panel-body ul li:last-child {
border-bottom: 0
}
.panel-body ul a {
color: #1f1f1f
}
.panel-body ul li a:link {
margin-left: 40px !important;
color: #1f1f1f
}
.panel-body ul li a:active {
color: #fff
}
.panel-body ul li a:hover {
text-decoration: none;
color: #FF5500
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
border: 0 !important;
padding: 0
}
.panel-heading.collapsed {
background-color: #222222
}
/* ******** FORM STYLING ***********
************************************
*/
.form-horizontal .form-group .custom-label {
text-align: left;
margin-top: -10px;
font-size: 22px;
font-weight: normal;
color: #fff;
}
.form-horizontal .form-group .form-control {
background-color: #4d4d4d;
border-color: #4d4d4d;
color: #fff;
border-radius: 3px;
}
.form-horizontal .form-group .input-text {
font-size: 1.3em;
color: #fff;
}
.form-horizontal .form-group .form-control:hover {
background-color: #34383C;
border: 1px solid #4d4d4d;
}
.form-horizontal .form-group .form-control:focus {
border: 1px solid #FF5500;
}
/* DROPDOWN MENU STYLING */
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret {
/* position: absolute; right: 12px; top: calc(50% - 2px); */
background-image: url('arr.jpg');
background-repeat: no-repeat;
position: absolute;
right: 12px;
top: calc(50% - 2px);
}
.form-group.social .col-md-2 {
padding: 0;
margin: 0;
width: 200px;
}
.form-group.social .col-md-2 .fa-instagram,
.form-group.social .col-md-2 .fa-twitter {
font-size: 1.1em;
padding: 0 5px 0 20px;
}
.changePswrd {
padding: 3px 0 0 12px;
}
.changePswrd a:link {
font-family: 'Lato', verdana, sans-serif;
font-size: 1.3em;
color: #fff;
display: inline-block;
}
.changePswrd a:hover {
text-decoration: none;
color: #FF5500;
}
.form-group .placeholder-img.col-md-2 {
height: 320px;
width: 230px;
background-color: #4d4d4d;
margin: 0 20px;
}
.form-group .placeholder-img-thumb {
height: 320px;
}
.form-group .placeholder-img-thumb .thumb-img {
text-align: center;
width: 130px;
}
.form-group .placeholder-img-thumb .circle {
width: 130px;
height: 130px;
background: #4d4d4d;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.form-group .placeholder-img-thumb .caption {
width: 100%;
color: #fff;
}
.form-group .profile-photo-help.col-md-4 {
width: 200px;
}
.form-group .profile-photo-help {
width: 280px;
color: #fff;
}
.form-group .profile-photo-help p {} .form-group .profile-photo-help a:link {
color: #FF5500;
text-decoration: none;
}
.form-group .profile-photo-help a:hover {
color: #fff;
}
.form-group .create-card-btn .glyphicon-plus {
font-size: 0.9em;
padding: 0 10px 0 0;
}
.form-group .input-group.date span.input-group-addon {
background-color: #4d4d4d;
color: #fff;
border: none;
border-radius: 3px;
border-color: none;
}
.form-group .input-group.date .form-control.date {
font-size: 1.2em;
}
.form-group .strength-delete-btn .glyphicon-minus {
font-size: 0.9em;
padding: 0 5px 0 0;
}
/* SUBMISSION BUTTONS */
.submission {
background-color: #333333;
border-top: 1px solid #4d4d4d;
margin-top: 80px;
padding-top: 40px;
padding-bottom: 40px;
}
.submission button {
border-radius: 3px;
font-size: 1.5em;
border: none;
}
.submission .glyphicon-remove-circle,
.submission .glyphicon-ok-circle {
font-size: 1.6em;
font-weight: 400;
vertical-align: middle;
padding: 0 5px;
color: #fff;
}
.submission .btn-cancel {
margin-right: 20px;
background-color: #4d4d4d;
}
.submission .btn-save {
background-color: #aaa;
}
.submission .action-btns .btn-primary:hover,
.submission .action-btns .btn-primary.outline:focus,
.btn-primary:active {
color: #33a6cc;
border-color: #fff;
}
.submission .action-btns .btn-primary:active,
.submission .action-btns .btn-primary.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn.outline.upload {
position: absolute;
bottom: 0;
padding: 5px 40px 5px 40px;
}
.btn.outline.football {
background: none;
padding: 5px 22px;
margin-right: 20px;
}
.btn.outline.create-card-btn {
background: none;
padding: 5px 22px;
}
.btn.outline.sizing-guide-btn {
background: none;
padding: 5px 22px;
}
.btn.outline.strength-delete-btn {
background: none;
padding: 5px 22px;
width: 100%
}
.btn.outline.add-result-btn {
background: none;
padding: 5px 22px;
margin-top: 15px;
}
.btn-primary.outline {
border: 1px solid #fff;
color: #fff;
font-family: 'Lato', verdana, sans-serif;
font-size: 1.1em;
}
.btn-primary.outline.strength-delete-btn {
border: 1px solid #4d4d4d;
color: #4d4d4d;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #FF5500;
border-color: #F47929;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
/* CUSTOM SUBMISSION BTN VALUES */
.btn-primary {
padding: 14px 24px;
border: 0 none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
}
<head>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Heading 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 accordion sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne"> Link 1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li> sub-link
<li> sub-link
<li> sub-link
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">Title 2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li> sub-link
<li> sub-link
<li> sub-link
<li> sub-link
<li> sub-link
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">Title 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li> sub-link
<li> sub-link
<li> sub-link
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">Title 4</a>
</h4>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">Title 5
</a>
</h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="container load">
<div class="col-lg-10">
<div class="wrapper">
<div class="row">
<div class="col-md-10">
<h2>Page Title</h2>
<div class="form-horizontal" role="form" action="/details" method="post">
<div class="form-group">
<h3 class="inner">General</h3>
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="" placeholder="title" focus>
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Information</h3>
<p>
Info titletitletitletitletitletitletitletitletitle</br>
titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle
</p>
</div>
<div class="form-group">
<h3 class="inner">Address</h3>
<label for="unit" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="25">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="streetName" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="suburb" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="zip" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="state" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Social Networks</h3>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="instagramhandle">
</div>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="twitterhandle">
</div>
</div>
<div class="row submission">
<div class="form-group btn-block">
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg btn-cancel ">Cancel changes</button>
<button type="button" class="btn btn-default btn-lg btn-save">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end of form -->
</div>
</div>
<!-- end of row -->
<!-- </div> end of container -->
</div>
</div>
</div>
<!-- end of container -->
body {
background-color: #ccc;
}
/* General styles */
.container { background-color: #bbb; font-family: arial, verdana, sans-serif; width: 1530px; margin: 0 auto; }
/* Large desktop */
#media and screen (max-width: 1590px) {
.container {width: auto;}
}
#media and screen (min-width: 981px) and (max-width: 1530px){
.accordion.sidebar {width: 230px;
}
}
#media and screen(max-width: 980px) {
}
.col-md-10{ border-left: 1px solid #4d4d4d; padding: 0; margin: 0;}
.container .row.header{ color: #fff; border-bottom: 6px solid #fff }
.container .row.header h1 { padding: 30px 0; font-size: 3.5em; font-weight: 300; }
h2 { color: #fff; font-size: 32px; }
h3 {color: #ccc; font-size: 30px; padding-bottom: 10px; }
h3.inner { padding-left: 15px;}
h4 {color: #ccc; font-size: 22px; }
.headers { border-top: 1px solid #ccc; margin-top: 50px; margin-bottom:30px;}
.headers h1 { padding: 20px 0 0 0; }
.headers p {font-size: 1.6em; color: #fff; padding: 0 0 10px 0; margin: 0;}
/* ****** NAVIGATION SIDEBAR ********
**********************************
*/
.accordion.sidebar { padding: 0; background-color: #fff;}
.panel {border-radius: 0 !important; border: 0; font-family: 'Lato', Arial, sans-serif; font-weight: 400}
.panel-group {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff}
.panel-heading h4.panel-title {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}
.panel-heading h4.panel-title a:link { margin-left: 10px; text-decoration: none; font-weight: bold; font-size: 20px}
.panel-heading h4.panel-title a:active {color: #fff }
.panel-heading h4.panel-title a:hover {color: #FF5500}
.panel-group .panel+.panel {margin-top: 0px !important; border-top: 1px solid #ccc}
.panel.panel-default.custom .panel-heading { background: #fff; color: #000; border-color: #fff }
.panel-body {/* padding-top: 2px !important; padding-bottom: 0px !important; */ padding: 0px !important; border: 0 }
.panel-body ul { margin: 0; padding: 0 }
.panel-body ul li { padding: 10px 0 !important; border-bottom: 1px solid #ccc; font-size: 1.4em}
.panel-body ul li:last-child {border-bottom: 0}
.panel-body ul a { color: #1f1f1f}
.panel-body ul li a:link { margin-left: 40px !important; color: #1f1f1f}
.panel-body ul li a:active {color: #fff}
.panel-body ul li a:hover {text-decoration: none; color: #FF5500 }
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse { border: 0 !important; padding: 0}
.panel-heading.collapsed { background-color: #222222}
/* ******** FORM STYLING ***********
************************************
*/
.form-horizontal .form-group .custom-label{ text-align: left; margin-top: -10px; font-size: 22px; font-weight: normal; color: #fff; }
.form-horizontal .form-group .form-control { background-color: #4d4d4d; border-color: #4d4d4d; color: #fff; border-radius: 3px;}
.form-horizontal .form-group .input-text { font-size: 1.3em; color: #fff;}
.form-horizontal .form-group .form-control:hover { background-color: #34383C; border: 1px solid #4d4d4d;}
.form-horizontal .form-group .form-control:focus { border: 1px solid #FF5500; }
/* DROPDOWN MENU STYLING */
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret { /* position: absolute; right: 12px; top: calc(50% - 2px); */ background-image: url('arr.jpg'); background-repeat: no-repeat; position: absolute; right: 12px; top: calc(50% - 2px);}
.form-group.social .col-md-2 { padding: 0; margin: 0; width: 200px;}
.form-group.social .col-md-2 .fa-instagram, .form-group.social .col-md-2 .fa-twitter { font-size: 1.1em; padding: 0 5px 0 20px;}
.changePswrd {padding: 3px 0 0 12px;}
.changePswrd a:link{ font-family: 'Lato', verdana, sans-serif; font-size: 1.3em; color: #fff; display: inline-block; }
.changePswrd a:hover{ text-decoration: none; color: #FF5500; }
.form-group .placeholder-img.col-md-2{ height: 320px; width: 230px; background-color: #4d4d4d; margin: 0 20px;}
.form-group .placeholder-img-thumb { height: 320px;}
.form-group .placeholder-img-thumb .thumb-img { text-align: center; width: 130px;}
.form-group .placeholder-img-thumb .circle { width: 130px; height: 130px; background: #4d4d4d; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
.form-group .placeholder-img-thumb .caption { width: 100%; color: #fff;}
.form-group .profile-photo-help.col-md-4 { width: 200px;}
.form-group .profile-photo-help { width: 280px; color: #fff;}
.form-group .profile-photo-help p {}
.form-group .profile-photo-help a:link { color: #FF5500; text-decoration: none; }
.form-group .profile-photo-help a:hover { color: #fff; }
.form-group .create-card-btn .glyphicon-plus { font-size: 0.9em; padding: 0 10px 0 0;}
.form-group .input-group.date span.input-group-addon { background-color: #4d4d4d; color: #fff; border: none; border-radius: 3px; border-color: none;}
.form-group .input-group.date .form-control.date { font-size: 1.2em;}
.form-group .strength-delete-btn .glyphicon-minus { font-size: 0.9em; padding: 0 5px 0 0;}
/* SUBMISSION BUTTONS */
.submission { background-color: #333333; border-top: 1px solid #4d4d4d; margin-top: 80px; padding-top: 40px; padding-bottom: 40px;}
.submission button{ border-radius: 3px; font-size: 1.5em; border: none;}
.submission .glyphicon-remove-circle, .submission .glyphicon-ok-circle {font-size: 1.6em; font-weight: 400; vertical-align: middle; padding: 0 5px; color: #fff;}
.submission .btn-cancel {margin-right: 20px; background-color: #4d4d4d;}
.submission .btn-save {background-color: #aaa; }
.submission .action-btns .btn-primary:hover, .submission .action-btns .btn-primary.outline:focus, .btn-primary:active { color: #33a6cc; border-color: #fff; }
.submission .action-btns .btn-primary:active, .submission .action-btns .btn-primary.active { border-color: #007299; color: #007299; box-shadow: none; }
.btn.outline { background: none; padding: 12px 22px; }
.btn.outline.upload { position: absolute; bottom: 0; padding: 5px 40px 5px 40px; }
.btn.outline.football { background: none; padding: 5px 22px; margin-right: 20px;}
.btn.outline.create-card-btn {background: none; padding: 5px 22px; }
.btn.outline.sizing-guide-btn { background: none; padding: 5px 22px; }
.btn.outline.strength-delete-btn { background: none; padding: 5px 22px; width: 100%}
.btn.outline.add-result-btn { background: none; padding: 5px 22px; margin-top: 15px;}
.btn-primary.outline { border: 1px solid #fff; color: #fff; font-family: 'Lato', verdana, sans-serif; font-size: 1.1em;}
.btn-primary.outline.strength-delete-btn { border: 1px solid #4d4d4d; color: #4d4d4d;}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary { color: #FF5500; border-color: #F47929; }
.btn-primary.outline:active, .btn-primary.outline.active { border-color: #007299; color: #007299; box-shadow: none; }
/* CUSTOM SUBMISSION BTN VALUES */
.btn-primary { padding: 14px 24px; border: 0 none; }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none; }
<head>
<title>CUSTOM LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom-styles.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- **********************************
following functionality for the accordion referencing to load individual
body of parent links
************************************
-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<!-- script for navigation load of individual body sections -->
<script src="accordion.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Heading 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 accordion sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne">
Link 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li> sub-link
<li> sub-link
<li> sub-link
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">
Title 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li> sub-link
<li> sub-link
<li> sub-link
<li> sub-link
<li> sub-link
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">
Title 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li> sub-link
<li> sub-link
<li> sub-link
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">
Title 4
</a>
</h4>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">
Title 5
</a>
</h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="container load">
<div class="col-lg-10">
<div class="wrapper">
<div class="row">
<div class="col-md-10">
<h2>Page Title</h2>
<div class="form-horizontal" role="form" action="/details" method="post">
<div class="form-group">
<h3 class="inner">General</h3>
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="" placeholder="title" focus>
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Information</h3>
<p>
Info titletitletitletitletitletitletitletitletitle </br>
titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle
</p>
</div>
<div class="form-group">
<h3 class="inner">Address</h3>
<label for="unit" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="25">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="streetName" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="suburb" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="zip" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="state" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Social Networks</h3>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="instagramhandle">
</div>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="twitterhandle">
</div>
</div>
<div class="row submission">
<div class="form-group btn-block">
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg btn-cancel ">Cancel changes</button>
<button type="button" class="btn btn-default btn-lg btn-save">Save changes</button>
</div>
</div>
</div>
</div> <!-- end of form -->
</div>
</div> <!-- end of row -->
<!-- </div> end of container -->
</div>
</div>
</div>
<!-- end of container -->