CSS/HTML Seperation line between text

Question

I'm creating a webpage About Us section and I have two requirements, two sets of text 'About Us' & 'Clients & feedback'. They need to be side by side and I would like a line separating them. I'm using bootstrap as a framework and I wondered if anyone could tell me how to get the line in place.

Here's my HTML:

<section id="section-two" class="section-two">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h3>Placehold</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
            </div>
            <div class="col-lg-6">
                <h3>Project Two</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
            </div>
        </div> 
    </div> 
</section>

please look at this http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows — Radu, Sep 03 '15 at 09:33
Do you mean this -- http://jsfiddle.net/abhitalks/66qhh4wd/ ? — Abhitalks, Sep 03 '15 at 09:47

score 0 · Answer 1 · answered Sep 03 '15 at 09:35

0

use border-right property on your first column.

 border-right: 2px solid black;

answered Sep 03 '15 at 09:35

harshitpthk

4,058
2
24
32

This still adds a horizontal line above my second block of text, I want a vertical line between both Columns – Tom Withers Sep 03 '15 at 09:38
can you kindly prepare a fiddle i can see why there is a horizontal line. – harshitpthk Sep 03 '15 at 10:26

score 0 · Answer 2 · answered Sep 03 '15 at 09:49

0

add the border like @hars said but only on the first column

div.col-lg-6:nth-of-type(1){  border-right: 2px solid black; }

answered Sep 03 '15 at 09:49

gamera_the_beast

34
1
6

Rohit Kumar · Answer 3 · 2015-09-03T10:21:08.250

0

you can use this to add a single line between two columns -

.col-lg-6 ~ .col-lg-6 {
    border-left: 1px solid red;
}

Working Fiddle

Note: The above technique will work even if you have more than two columns. See this fiddle.

edited Sep 03 '15 at 10:21

answered Sep 03 '15 at 10:13

Rohit Kumar

2,048
1
14
28

CSS/HTML Seperation line between text

3 Answers3