CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anthony Bonarrigo
Anthony Bonarrigo

Reputation: 180

How to prevent Bootstrap 3 columns from overlapping

Currently learning bootstrap, and making up dummy websites. I have this code here that I cant get working right. The titles of these columns overlap. Placeholder text has been added. There are no styles in the page that would affect this to my knowledge.

<div class="container-fluid whatwecando" style="background-color: #3ED500;min-height: 600px">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <br><br>
                    <h1 style="text-decoration: underline; font-family: Poiret+One; font-size: 3em; color: #F1F2F2"><b>WHAT WE CAN DO</b> FOR YOU</h1>
                    <br></div>
            </div>
            <div class="row">
                <div class="col-sm-2 cando text-center"></div>
                <div class="col-sm-2 cando text-center">
                    <img class="img-circle" src="" alt="Generic placeholder image">
                    <h2 style="font-family: Nunito; color: #F1F2F2">THEFIRSTTITLE</h2>
                    <p class="text-center" style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                </div><!-- /.col-lg-4 -->
                <div class="col-sm-2 cando text-center">
                    <img class="img-circle" src="" alt="Generic placeholder image">
                    <h2 style="font-family: Nunito; color: #F1F2F2">THESECONDTITLE</h2>
                    <p class="text-center"style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                </div><!-- /.col-lg-4 -->
                <div class="col-sm-2 cando text-center">
                    <img class="img-circle" src="" alt="Generic placeholder image">
                    <h2 style="font-family: Nunito; color: #F1F2F2">THETHIRDTITLE</h2>
                    <p class="text-center"style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                </div><!-- /.col-lg-4 -->
                <div class="col-sm-2 cando text-center">
                    <img class="img-circle" src="" alt="Generic placeholder image">
                    <h2 style="font-family: Nunito; color: #F1F2F2">MANYTITLESSS</h2>
                    <p class="text-center" style="text-align: center;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>       
                </div>
                <div class="col-sm-2 cando text-center"></div>
            </div><!-- /.row -->
        </div>

Here's a fiddle of the problem: http://codepen.io/anon/pen/XKEyvd

EDIT: Updated code link

Thanks!

Upvotes: 2

Views: 400

Answers (2)

Prashanth Benny
Prashanth Benny

Reputation: 1608

i see that the issue is due to the defined grid sizes. change them to higher ones.

ex: the places you have used col-sm-3, you would use col-sm-4.

and also include classes for devices of larger sizes. like, the places where you use col-sm-4, you need to add col-md-4 and col-lg-4 to work with all range of devices like cellphone(sm), tablet(md), desktop PC(lg).

there are other ways too like the previous answer if you really need to set the grid size exactly the same way you have set.

Hope this helped you... thanks!

Upvotes: 1

Rohit
Rohit

Reputation: 1812

Problem: Title of the column is too large and font size is also big to fit in the column, so it combines with another column title.

Solution:

  1. Use word-wrap: break-word; for title h2. This will break the title if it not fit in one line. see fiddle https://jsfiddle.net/24sck8rs/3/
  2. Seems title correct if you have space in words: https://jsfiddle.net/24sck8rs/4/

Upvotes: 4

Related Questions