CODEWITHSUNDEEP
csstwitter-bootstrap
Robert
Robert

Reputation: 10390

Boostrap indenting columns in row

I am new to bootstrap. Why is the second row with 3 columns (col-sm-3, col-sm-6 and col-sm-3) being indented, the other two rows have a wider width? How can I make all rows the same width?

.header {background-color: #9933cc;}
    .menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	.menu li {
		background-color :#33b5e5;
		margin-bottom: 7px;
	}
	.aside {background-color: #33b5e5;}
	.footer {background-color: #0099cc;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
	<div class='row'>
		<div class='header'>
			<h1>China</h1>
		</div><!--end header-->
	</div>
	<div class='row'>
		<div class='menu col-sm-3'>
			<ul>
				<li>The Flight</li>
				<li>The City</li>
				<li>The Island</li>
				<li>The Food</li>
			</ul>
		</div><!--end menu-->
		<div class='col-sm-6'>
			<h1>The City</h1>
			<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
			<p>Resize the browser window to see how the content respond to the resizing.</p>
		</div>
		<div class='col-sm-3'>
			<div class='aside'>
				<h2>What?</h2>
				<p>Chania is a city on the island of Crete.</p>
				<h2>Where?</h2>
				<p>Crete is a Greek island in the Mediterranean Sea.</p>
				<h2>How?</h2>
				<p>You can reach Chania airport from all over Europe.</p>
			</div>
		</div>
	</div>
	<div class='row'>
		<div class='footer'>
			<p>Resize the browser window to see how the content respond to the resizing.</p>
		</div><!--end footer-->
	</div>
</div><!--end container-->

Upvotes: 0

Views: 3461

Answers (1)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Because .col-sm-3 and .col-md-6 adds padding to the div elements.

Wrap the header and footer in col-sm-12

HTML

 <div class="col-md-12">
   <div class='header'>
        <h1>China</h1>
   </div><!--end header-->
</div>

<div class="col-sm-12">
 <div class='footer'>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
 </div><!--end footer-->
</div>

Working Fiddle

Adding .col-sm-12 class to .footer and .header div's don't change because, background-color property is applied on .header and .footer and color is applied including the padding.

Wrapping these elements (footer and header) divs in .col-sm-12 adds padding to parent elements.

Upvotes: 1

Related Questions