Challenges creating a grid system similar to Bootstrap 3.3.5

0

UPDATE
This question should just be deleted, I cannot delete it though because it has an answer. I just tested the “issue” I am having with Bootstrap 3.3.5 and their are no “gutters” between the columns so my Bootstrap CSS I drafted myself is mimicking Boostrap 3.3.5 correctly.

See Fiddle: https://jsfiddle.net/s6z77qtb/

I am doing a small “hand crafted” Boostrap demo.

Issue:
My .col-lg-2 columns have no gutter in between them even though I have set padding-left: 15px; padding-right: 15px; and .row has the margin-left: -15px; margin-right: -15px;.

If you look at this you will see the 30px gutter between columns.

And here is a nice article explaining how that gutter is created from padding and having negative 15px on the horizontal margins on the .row (scroll down to “Column” section):
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

html, body{
	padding: 0;
	margin: 0;
	height: 100%;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.container-fluid{
	padding-right: 15px;
	padding-left: 15px;
	margin-left: auto;
	margin-right: auto;
}

.row {
	margin-left: -15px;
	margin-right: -15px;
}
	
.row-centered {
    text-align:center;
}

.nav-bar {
	padding: 5px;
	width: 100%;
	height: 56px;
	background: -moz-linear-gradient(top, #fff 0%, #eee 100%, #eee 100%);
	background: -webkit-linear-gradient(top, #fff 0%, #eee 100%, #eee 100%);
	background: linear-gradient(to bottom, #fff 0%, #eee 100%, #eee 100%);
}

.nav-bar ul {
	list-style: none;
}

.nav-bar ul li {
	float:left;
	padding-left: 15px;
}

.nav-bar:after, .row:after, .container-fluid:after {
	clear:both;
    display: table;
    content: " ";
}

.bg-red {
	background-color: red;
}

.col-border {
	border: 1px solid #000;
}

@media (min-width: 1200px){

	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
		float: left;
		position: relative;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col-lg-offset-1 {
		margin-left: 8.33%;
	}
	
	.col-lg-offset-2 {
		margin-left: 16.66%;
	}
	
	.col-lg-offset-3 {
		margin-left: 25%;
	}


	.col-lg-1 {
		width: 8.33%;
	}
	
	.col-lg-2 {
		width: 16.66%;
	}
	
	.col-lg-3 {
		width: 25%;
	}

	.col-lg-4 {
		width: 33.33%
	}
}

@media (min-width: 992px){

	.col-md-1, .col-md-4, .col-md-12 {
		float: left;
		position: relative
		padding-left: 15px;
		padding-right: 15px;
	}


	.col-md-12 {
		width: 100%;
	}

	.col-md-4 { 
		width: 33.33%
	}
}
@media (min-width: 768px){
	.col-sm-1 {
		width: 8.33333333%;
	}
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
	<div class="nav-bar">
		<ul>
			<li>Home</li>
			<li>About</li>
		</ul>
	</div>
	<div class="container-fluid">
		<div class="row row-centered">
			<div class="col-lg-2 well">
					<h4>.row 1 .col-lg-3 2</h4>
			</div>
			<div class="col-lg-2  well"">
					<h4>.row 1 .col-lg-3 3</h4>
			</div>
		</div>
	<div>

Link: Challenges creating a grid system similar to Bootstrap 3.3.5
Source: Stack Jquery

Share.

About Author

Leave A Reply