Jose Antonio Jose Antonio - 6 months ago 16
CSS Question

Space between columns Bootstrap3

im new in this community, and a very newbie coder.

I want to set a space between this two columns, I tried a few codes but didn't work...

This is what I did:

<div class="container">
<div class="main row">
<div class="col-md-3">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
</p>
</div>
</div>

<div class="col-md-9">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
</p>
</div>
</div>
</div>
</div>


And i got this:

http://i.imgur.com/0dhqCZO.png

How I can set a space of X pixels between? :S




And another question to not make another post:

How I can set the 2 columns the same height? ( I know its a awesome newbie question haha )

Answer

First of all, actually there is a space between this two columns (30px due to Bootstrap padding included in col- classes. You don't see this 30px gap because you set background to col- classes. In order to see it you have to have another div inside col- class.

CODEPEN EXAMPLE

Secondly, read about grid system in Bootstrap, you can't have col-md-12 directly after col-md-3 (you have to use another row if you want to nest columns in another column).

You can change the gap by changing col- classes padding. Default for Bootstrap is 15px on each side. For example:

.col-md-3,
.col-md-9 {
  padding-left: 60px;
  padding-right: 60px;
}

CODEPEN EXAMPLE

Columns of the same height, the easiest example is this:

.column-1,
.column-2 {
  height: 300px;
}

CODEPEN EXAMPLE

Comments