I'm a bootstrap newbie user, so if it is a stupid question I'm sorry with you!
I'm trying to turn-off the background from the last right col but I'm not able to do this.
You can see the picture; I would like to hide the grey above the red rectangle..
picture
Here is the code:
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="row">
<div class="col-lg-11 news">
<h2>NEWS</h2>
</div>
</div>
<div class="row news">
<div class="col-lg-3">
<h3>Title</h3>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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-lg-1"></div>
</div>
</div>
</div>
Here is the code on an online editor
Thank you in advance!
so if you want to hide that little white area
change col-lg-11 to col-lg-12 :
<div class="col-lg-12 news">
<h2>NEWS</h2>
</div>
Why don't you fill the space?
<div class="col-lg-12 news"> <h2>NEWS</h2> </div>
Maybe something like:
<div class="col-lg-1 no-background"></div> // added class
CSS:
.no-background { background: none; }
I solved editing the number of "mother"-row column and its nested items: http://www.bootply.com/vcMjA3iMA5
Related
I am having an issue with bootstrap's justify-content-between. I have 2 divs inside a container and I want to position them at the extreme ends of the container. So I am using justify-content-between, but it is evenly distributing the space between the 2 divs, which I don't want. I want no space at the start i.e. extreme left and end i.e. extreme right. If I know correctly then justify-content-between should accumulate the space in the middle and place the divs at the extreme end.
the code is:
<div class="container flex flex-wrap justify-content-between">
<div class="block col-md-6">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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="block col-md-5">
<h2>Hello World</h2>
</div>
</div>
It is looking like this now: (Notice the space marked by the violet region on the browser)
I am using Brave browser.
Kindly, please help me out. I don't know how to solve this issue. Any help would be appreciated. Thank you.
Here is the working example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div style="display: flex;" class="container-fluid flex flex-wrap justify-content-between">
<div class="block col-md-6">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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="block col-md-5">
<h2>Hello World</h2>
</div>
</div>
</body>
</html>
Using a container div and applying justify-content-between to the row pushes the two columns to the left and right, leaving a single-column space in the middle (it’s a single column space because your left column is 6 columns wide and your right columns is 5 columns wide).
Using a container-fluid div and applying justify-content-between to the row makes the row go full width and pushes the two columns to the left and right, leaving a single-column space in the middle.
I like using the row div in a Bootstrap layout inside the container div as that’s the way Bootstrap is setup to work.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row justify-content-between bg-success">
<div class="block col-md-6 bg-info pt-5">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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="block col-md-5 bg-info pt-5">
<h2>Hello World</h2>
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between bg-success">
<div class="block col-md-6 bg-info pt-5">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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="block col-md-5 bg-info pt-5">
<h2>Hello World</h2>
</div>
</div>
</div>
Your question used col-md-5 and col-md-6, so for smaller screens, the display goes to col-12. I used the same column sizing in my answer.
One note about using Stackoverflow – you added a comment on May 14 a little while after I posted my comment, but since you didn’t include #Rich, Stackoverflow didn’t let me know you had posted a comment. Only the original poster gets notified for all comments and posts – the rest of us are only included if you specifically include a reference to our name (or if the comment follows an answer that we posted).
I have added 2 child divs in parent div and applied css and its working fine.
Try adding css style as below:
Regards,
Nisha Patel
I have a standard Bootstrap grid and an image inside a .col which height should be equal to the height of the text block to the right:
.img-fluid-height {
max-height: 100%;
width: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<p>
"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>
</div>
I expected the image to be the height of the .col container which height is equal to the height of the text block to the right. However, it doesn't work like this.
Remove the image from the flow using position:absolute and your text will define the height then you can use height:100% on the image:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<p>
"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>
</div>
I was assuming something else. You can do something like this with background-size.
.background-image {
height: 100%;
background-image: url("https://placehold.it/1920x1280");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<div class="background-image"></div>
</div>
<div class="col-8">
<p>
"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>
</div>
added width:100% Hope this helps. thanks
.img-fluid-height {
max-height: 100%;
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<p>
"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>
</div>
I need help aligning my divs acording to example below:
What I got so far is this:
I cant apply spacing in between the two divs, and the divs are not the same height.
My Html:
<div class="container - fluid">
<div class="row" id="wrapper">
<div class="col-lg-8 col-md-8" id="columneone">
<p>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-lg-4 col-md-4" id="columnetwo">
<p>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>
</div>
My css(I am using less):
#columneone{background-color:#deepblue !important; color:white !important;}
#columnetwo{background-color:#lightblue !important; color:white !important; }
#wrapper{margin-right:-173px; margin-left:-173px; padding-top: 10px}
You should review Bootstrap's documentation about its Grid as it will provide you with a better understanding for why your initial attempt lacked gutters between the background colors, as well as a variety of other ways you could improve your previous attempt.
In Bootstrap 4 we can take advantage of a host of new utility classes as well as the flexbox grid to achieve your desired results.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row row-eq-height">
<div class="col-8">
<div class="bg-dark h-100 p-3">
<p class="text-white">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>
<div class="col-4">
<div class="bg-secondary h-100 p-3">
<p class="text-white">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>
</div>
</div>
The colors used here are just pulled using Bootstraps .bg-* utility classes, you'll need to adjust that to correctly reflect your preferred scheme.
I have started digging into Bootstrap and I'm a bit confused about the usage of the .container class.
Most of the tutorials recommend using the following structure:
-.container
--.row
---.col-
---.col-
Etc
I have stumbled upon this W3schools example:
W3Schools - Bootstrap,
which uses multiple .container elements and doesn't wrap everything inside a .container (e.g. the carousel).
So my questions:
In which cases is it advisable to use multiple .container elements?
Is there a general rule for which types of elements shouldn't be wrapped inside a .container?
Statutory Warning: Don't follow W3Schools. This is one of the typical examples where they are not following the Bootstrap standards plus, the examples are not so good. (See W3Fools). It's always advisable to follow the primary documentation of Bootstrap.
Multiple containers are perfectly okay to separate contents, one best way I could say is, if you have any instance of the background extending to the whole width, then you will definitely use multiple containers.
See the below example:
* {font-family: 'Segoe UI';}
section.about {background-color: #fcc;}
section.contact {background-color: #cfc;}
section.info {background-color: #ccf;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 1</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 2</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 3</div>
</div>
</div>
</section>
<p>With more content</p>
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
</section>
Preview
The container element is required by bootstrap to host its grid system. Therefore, you should always have one HTML tag with the .container class. You can also use multiple containers below each other. Nested containers don't work, because they are not nestable due to their padding.
If you want to have full width elements, use the .container-fluid class. This way you can implement carousel items and full width banners.
The container element acts as the root element of your bootstrap application, that hosts all your other elements. Therefore, every bootstrap element should be inside a container.
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!
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:
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/
Seems title correct if you have space in words: https://jsfiddle.net/24sck8rs/4/
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!