Space between columns Bootstrap3 - css

Question

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 1

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

Answer 2

Use CSS's margin.
<div class="container">
<div class="main row">
<div class="col-md-3" style="margin: 10px">
<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" style="margin: 10px">
<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>
Of course, change 10px to however many pixels you want.
Since we are using margin which affects all borders, 10px is half the amount of space that will be between the columns.
You can use margin-right: 10px on the first instead, if you want exactly 10px space between the columns, and no extra margin around them.
margin: Defines the margin around all borders of the object
margin-top: Defines the margin at the top border
margin-bottom: Defines the margin at the bottomborder
margin-right: Defines the margin at the right border
margin-left: Defines the margin at the left border

Answer 3

You should use bootstrap gutter for the separate columns. You will find good example and some information about it here
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/
And you can use .row-eq-height to get the col-height equal.
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="row row-eq-height"></div>
Full information is available here.
http://getbootstrap.com.vn/examples/equal-height-columns/#

Answer 4

If width of content boxes is not a problem you can use col-md-offset-* where * can be 1,2,..,12 as per your choice.
<div class="col-md-offset-1 col-md-8">
<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>
For setting two columns to the same height you can set min-height css to some predefined length.