Question posted in 
I have a two column bootstrap layout.
On the left column is an accordion navigation, and on the right is where the main content is.
The left navigation should be fixed width (before it hits the breakpoint)
but remain responsive and the main content should just remain responsive.
My issue is, that my buttons to the right seem to extend outside past the the column wall. The buttons have a fixed width and a position absolute, but how could I modify them so they dont extend out past the column like this?
The .container width is suppose to have a width of 1530px, but for some reason its not implementing that style.
here is a codepen: codepen.io/krystyna93/pen/PNrZjz
body {
background-color: #aaa;
}
html {
background-color: #aaa;
}
/* General styles */
.container {
background-color: #000;
width: 1530px;
margin: 0 auto;
}
.row.header {
color: #fff;
border-bottom: 6px solid #fff
}
.row.header h1 {
padding: 30px 0;
font-size: 3.5em;
font-weight: 300;
}
h2 {
color: #fff;
font-size: 2.5em;
padding: 0;
}
h3 {
color: #f47929;
font-size: 2em;
padding-bottom: 10px;
}
.headers {
margin: 50px 0 30px 0;
}
.headers h1 {
padding-top: 20px;
}
.headers p {
font-size: 1.6em;
color: #fff;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
/* nav sidebar */
.sidebar {
padding: 0;
margin: 0;
background-color: #fff;
}
.panel {
border-radius: 0 !important;
border: 0;
font-weight: 400 border: 0;
}
.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: 1.5em border: 0;
}
.panel-heading h4.panel-title a:active {
color: #fff border: 0;
}
.panel-heading h4.panel-title a:hover {
color: #f47929
}
.panel-group .panel+.panel {
margin-top: 0px !important;
border-top: 1px solid #ccc;
border-top: 0;
border-left: 0;
border-right: 0;
}
.panel.panel-default.custom .panel-heading {
background: #fff;
color: #000;
border-color: #fff;
border: 0;
}
.panel-body {
/* padding-top: 2px !important; padding-bottom: 0px !important; */
padding: 0px !important;
border: 0
}
.panel-body ul {
margin: 0;
padding: 0 border: 0;
}
.panel-body ul li {
padding: 10px 0 !important;
border-bottom: 1px solid #ccc;
font-size: 1.4em;
border-left: 0;
border-right: 0;
}
.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: #f47929
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
border: 0 !important;
padding: 0
}
.panel-heading.collapsed {
background-color: #222222
}
/* form elements */
.form-horizontal .form-group {
padding: 0 15px;
}
.form-horizontal .form-group .custom-label {
text-align: left;
padding-left: 0;
margin-top: -10px;
font-size: 1.7em;
font-weight: normal;
color: #fff;
}
.form-horizontal .form-group .form-control {
background-color: #222;
border: 0;
color: #fff;
padding: 0px 10px;
border-radius: 3px;
}
.form-horizontal .form-group .input-text {
font-size: 1.3em;
color: #fff;
}
.form-horizontal .form-group .form-control:focus {
border-color: #fff;
}
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret {
position: absolute;
right: 12px;
top: calc(50% - 2px);
}
.form-group.social .col-md-2 {
padding: 0;
margin: 0;
}
.form-group.social .col-md-2 .fa-instagram {
font-size: 1.1em;
}
.changePswrd {
padding: 3px 0 0 12px;
}
.changePswrd a:link {
font-size: 1.3em;
color: #fff;
display: inline-block;
}
.changePswrd a:hover {
text-decoration: none;
color: #F47929;
}
/* TOGGLE/SWITCH INPUT BUTTONS */
.toggle-input-btn {
width: 200px;
height: 38px;
/* top: 50%; */
left: 20%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-two {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.3em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-three {
width: 200px;
height: 38px;
left: 60%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.3em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-four {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-five {
width: 200px;
height: 38px;
left: 10%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-six {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn-seven {
width: 200px;
height: 38px;
left: 10%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #000;
border-radius: 3px;
line-height: 34px;
font-size: 1.2em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/
cursor: pointer;
}
.toggle-input-btn span,
.toggle-input-btn-two span,
.toggle-input-btn-three span,
.toggle-input-btn-four span,
.toggle-input-btn-five span,
.toggle-input-btn-six span,
.toggle-input-btn-seven span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.toggle-input-btn div,
.toggle-input-btn-two div,
.toggle-input-btn-three div,
.toggle-input-btn-four div,
.toggle-input-btn-five div,
.toggle-input-btn-six div,
.toggle-input-btn-seven div {
width: 100px;
height: 80%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 3px;
}
.toggle-input-btn div,
.toggle-input-btn-three div,
.toggle-input-btn-six div,
.toggle-input-btn-seven div {
border: 2px solid #aaa;
}
.toggle-input-btn-two div,
.toggle-input-btn-four div,
.toggle-input-btn-five div {
border: 2px solid #b3b3b3;
}
/* footer section */
.form-group.action-btns button {
margin: 50px 0 60px 20px;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #fff;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #0099cc;
color: #0099cc;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #33a6cc;
}
.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;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.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"></script>
<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>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Main Header</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 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">
Page Link
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</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">
Another Page Link
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</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">
Another Page Title
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</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="#collapseFour">
Another Page Link
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub link</a>
<li><a href=""> sub link</a>
</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">
Another Page Link
</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">
Another Page Link
</a>
</h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="row col-md-10 content">
<div class="account-wrap">
<h2>Page Title</h2>
<h3>General</h3>
<div class="form-horizontal" role="form" action="/profileDetails" method="post">
<!-- <div class="col-sx-12"> -->
<div class="form-group row">
<label for="fname" class="col-md-2 hidden-xs hidden-sm control-label custom-label">First name</label>
<div class="col-md-8 col-xs-12 col-sm-12">
<input type="text" class="form-control input-text" id="inputfname" placeholder="First Name" focus>
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Last name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputlname" placeholder="Last Name">
</div>
</div>
<div class="form-group row clearfix">
<label for="email" class="col-md-2 hidden-xs hidden-sm control-label custom-label ">Email</label>
<div class="col-md-8 col-xs-12 col-sm-12 clearfix">
<input type="text" class="form-control input-text" id="email" placeholder="Email">
</div>
<div class="switch col-md-1 col-xs-12 col-sm-12 ">
<div class="toggle-input-btn clearfix">
<div class="slider"></div>
<span class="private">Private</span>
<span class="public selected">Public</span>
</div>
</div>
</div>
<div class="form-group row clearfix">
<label for="password" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Password</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="password" placeholder="************">
</div>
<div class="col-md-2 changePswrd">
<a href="changePswrd" class="changePswrd">Change Password</a>
</div>
</div>
<div class="form-group row">
<label for="language" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Language</label>
<div class="col-md-8">
<a class="btn btn-default dropdown-toggle btn-select col-xs-12 col-sm-12" data-toggle="dropdown" href="#">English (Australia) <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">English</a>
</li>
<li><a href="#">Japanese</a>
</li>
<!-- <li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
</div>
<div class="form-group row">
<label for="gender" class="col-md-2 hidden-xs hidden-sm control-label custom-label">Gender</label>
<div class="col-md-2 col-sm-12">
<div class="toggle-input-btn-two">
<div class="slider-two"></div>
<span class="male">Male</span>
<span class="female selected">Female</span>
</div>
</div>
<div class="col-md-5">
<a class="btn btn-default dropdown-toggle btn-select gender" data-toggle="dropdown" href="#">Other <span class="caret"></span></a>
<ul class="dropdown-menu inline">
<li><a href="#">gender</a>
</li>
<li><a href="#">gender</a>
</li>
<!-- <li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-three">
<div class="slider-three"></div>
<span class="private3">Private</span>
<span class="public3 selected">Public</span>
</div>
</div>
</div>
<div class="form-group">
<h3>Address</h3>
<label for="unit" class="col-md-2 control-label custom-label">Unit number</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="unitNumber" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 control-label custom-label">Street number</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="streetNumber" placeholder="enter">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 control-label custom-label">Street name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="streetName" placeholder="enter">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 control-label custom-label">Suburb</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="suburb" placeholder="enter">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 control-label custom-label">Postcode</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="zip" placeholder="3000">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 control-label custom-label">State</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="state" placeholder="VIC">
</div>
</div>
<div class="form-group">
<label for="country" class="col-md-2 control-label custom-label">Country</label>
<div class="btn-group col-md-8">
<a class="btn btn-default dropdown-toggle btn-select col-md-12" data-toggle="dropdown" href="#">Australia<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">etc</a>
</li>
<li><a href="#">etc</a>
</li>
<!-- <li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
</div>
<div class="headers">
<h3>Page Title</h3>
</div>
<div class="form-group social">
<div class="col-md-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="">
</div>
<div class="col-md-2">
<div class="toggle-input-btn-four">
<div class="slider-four"></div>
<span class="private4">Private</span>
<span class="public4 selected">Public</span>
</div>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-five">
<div class="slider-five"></div>
<span class="no">No</span>
<span class="yes selected">Yes</span>
</div>
</div>
</div>
<div class="form-group social">
<div class="col-md-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="">
</div>
<div class="col-md-2">
<div class="toggle-input-btn-six">
<div class="slider-six"></div>
<span class="private6">Private</span>
<span class="public6 selected">Public</span>
</div>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-seven">
<div class="slider-seven"></div>
<span class="no2">No</span>
<span class="yes2 selected">Yes</span>
</div>
</div>
</div>
<div class="form-group action-btns pull-right">
<div class="row">
<button type="button" class="btn btn-primary btn-lg outline"><span class="glyphicon glyphicon-remove-circle"></span>Cancel</button>
<button type="button" class="btn btn-primary btn-lg outline"><span class="glyphicon glyphicon-ok-circle"></span>Save</button>
</div>
</div>
</div>
<!-- end of form -->
</div>
</div>
</div>
<!-- end of container -->
2
Answers
Maybe you will have to use another wrapper inside the col in Bootstrap, that’s set to
position: relative;Update:
The column is simply to narrow to fit in the buttons.
Try using a wider column for the buttons. Here’s a code that works for the row with the button:
Hope that helps!
Update 2:
You will have to override the Bootstrap container width. Something like:
http://codepen.io/anon/pen/eZwBvw
You first defined your
.containerclass as having a width of 1590, but then add a media query max-width:1590 class of .container as having an auto width, which overrides your first rule. Remove your auto width rule.Read up on coding mobile-first and using min-width media queries, it will help avoid things like this in the future.
Also- in bootstrap, you cannot have more than a total of “12” col-widths per row.