CODEWITHSUNDEEP
htmltwitter-bootstrapcss
blue
blue

Reputation: 7375

Need to put text into 2 columns with Bootstrap?

I am new to Bootstrap and am having trouble modifying CSS in accordance with what I need to achieve. Basically I need 8 bullet points where the bullet is an awesome fonts icon, and the text is of varying lengths. I ned 4 bullets on left, 4 on right like this ideally:

enter image description here

I looked through eh Bootstrap.css file I have and have created this since col-lg-6 and .col-md-6 both had widths of 50%, meaning they should occupy 2 columns. 

<div class="container">
            <div class="row">
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Infrastructure & Data Center Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Network Administrators & Engineers</h3>
                    </div>
                </div>
               <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Architects</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">IT Directors & Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">IT Operation Directors & Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Virtual Server Administrators Systems Administrators</h3>
                    </div>
                </div>
                 <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Desktop Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Application Managers, Administrators & Developers</h3>
                    </div>
                </div>

This achieves this:

enter image description here

And this is close but you can see there is too much spacing between first and second column. This happens because since I have different lengths of text I had to set the max-width here, which pushes the 2nd column off Im thinking. Here is full CSS:

    .listPerson {
        display: inline-block;
        margin-left: 15px;
        font-family: 'proximanova-reg';
        font-size: 20px;
    }

.service-box {
  max-width: 490px;
  margin-right: 0px;
}
.col-lg-6 {
    width: 50%;
  }
.col-md-6 {
    width: 50%; /*Both cols have float: left also*/
  }
.row {
  margin-right: -15px;
  margin-left: -15px;
    margin-top: 45px;
}

Why is my first column so far to the left even if the text does not extend that far? I have tried setting padding-left and margin-left to 0px on the service-box and other selectors but nothing is working.

How can I fix this?

Upvotes: 1

Views: 3006

Answers (3)

Akshay
Akshay

Reputation: 805

this can be tried

<div class="col-lg-6 .col-md-6 text-left">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <h3 class = "listPerson">Infrastructure & Data Center Managers</h3>
                    </div>
                </div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

Your div classes are being written as <div class="col-lg-6 .col-md-6 text-left">. I'm sure you're aware of this, but when classes are referenced in the HTML, they shouldn't have the preceding full stop. As such, the .col-md-6 CSS declaration isn't getting applied to the div.

Upvotes: 0

Jacek Pietal
Jacek Pietal

Reputation: 2019

remove the dot .col-md-6 -> col-md-6 in class

Upvotes: 1

Related Questions