I've got a collection of points that I'm displaying, I'm floating them all left, but if the text is too much in the one above it forces there to be a space appear. Can't figure out what's causing this, does anyone have any ideas?
HTML:
<div class="all-the-screen checkmark-move">
<div class="contain-inner">
<div class="checkmark-outer">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
<div class="clearfix"></div>
<div class="read-more-show noselect">Show More</div>
</div>
</div>
</div>
CSS:
.checkmark-outer {
width:92%;
margin-left:4%;
margin-right:4%;
}
.checkmark-move {
margin-top:18px;
}
.checkmark-inner {
overflow: hidden;
font-family: 'Source Sans Pro Regular';
line-height:24px;
vertical-align: middle;
padding-left:4px;
padding-right:20px;
padding-top:4px;
}
.checkmark-33 {
width:33.33%;
float:left;
margin-bottom:6px;
}
.checkmark-icon {
float:left;
}
.icon-background {
color: #8d1e22;
}
.icon-text {
color: #ffffff;
}
Problem getting
Okay, since you are already familiar with the clearfix concept, you are using it wrong. Change your code this way, to include the floated elements inside the .clearfix:
<div class="clearfix">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>
Adding height is a hacky way. Use the clearfix properly to nest the floated items.
And also on a side note, use <i> tag to display icons and not <div> tags. It works, but it is not semantically correct. A <div> should be used only for a division or a section.
Give min-height to each checkmark wrap i.e in your case .checkmark-33
Example-
.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}
Related
I have an element which I would like to crop x% of it from the right, and so the width will automatically decrease by half to fit the new content.
Currently I'm using this:
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
span i{
position:relative;
left: 50%;
}
span{
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
But as you can see when using it the span keeps it's original width and doesn't crop
Or using clip-path
so it creates an extra gap between the half star and the solid star before/after it.
I have tried using transform: translateX(-x%); on the container but it sabotages the entire layout and every element positioned after it gets a x% offset.
Is there a way to crop the element and so it's size?
NOTE: the real element size is dynamic. I prefer a pure css solution that doesn't evolve using constants /JS
Thanks
edit, after understanding the question, you may use width + overflow
If it is dynamic and can show up many times, you may use var() to update the value on the fly
examples
Why do i use em for sizing ? - because its size is about its own font-size : here : fa-2x in your question , which em will match even if the class turns to be fa-4x .
div{
display:flex;
justify-content: space-evenly;
width:180px;
margin:1em;
filter:drop-shadow(0 0 3px)
}
i{
color: yellow;
}
div i:last-of-type{
width: var(--size);
overflow:hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div style="--size: calc(1em * 0.3)">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>30%
</div>
<div style="--size: calc(1em * 0.6)">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>60%
</div>
<div style="--size: calc(1em * 0.7)">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>70%
</div>
You may use clip-path, it will allow you to cut off a portion of the element . % can be used .
It also can allow you to cut it off with different shapes .
This will help you create your first clip-path https://bennettfeely.com/clippy/
specification https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
examples
div{
display:flex;
justify-content: space-evenly;
width:180px;
margin:1em;
filter:drop-shadow(0 0 3px)
}
i{
color: yellow;
}
div i:last-of-type{
clip-path: polygon(0 0, 60% 0, 60% 100%, 0% 100%);
}
/*cut half of its surface , but differently*/
[title] i:last-of-type{
clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%);
}
[class] i:last-of-type{
clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
}
[id] i:last-of-type{
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>60%
</div>
<div title="2.6">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>60%
</div>
<div class>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>50%
</div>
<div id >
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>50%
</div>
You should specify the width of each star, which is 36px in this case. Then you can just set the width to 16px for the last star and add overflow hidden.
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
width: 36px;
}
.half-star {
overflow: hidden;
width: 16px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star half-star"></i>
</div>
You can use the clip property and just for example do that
clip: rect(0px,60px,200px,0px); it should split it in half
Use fa-star-half as an alternative to custom styles. This will ensure dynamicity.
div {
display: flex;
justify-content: space-evenly;
width: 180px;
}
i {
color: yellow;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star-half"></i>
</div>
Solution w/o fa-star-half.
I called your custom span with the customs styles .custom. This solution requires removing justify-content: space-evenly and uses a calculated width on your span's that are not custom.
However, you still want the .custom span to be factored into this width. So you can set something like span:not(.custom) { width: calc(100% / 3); } Then, you will want to set text-align: center; to the non custom spans's also.
div {
display: flex;
width: 180px;
}
i {
color: yellow;
}
span.custom i {
position: relative;
left: 50%;
}
span.custom {
overflow: hidden;
}
span:not(.custom) {
width: calc(100% / 3);
text-align: center;
}
span {
outline: black 1px dotted;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
<span class="custom">
<i class="fas fa-2x fa-star"></i>
</span>
</div>
If you're looking to make the star half, you could use <i class="fa fa-star-half-o" aria-hidden="true"></i> instead of trying to crop it in half and then fit to the content.
Please let me know if I have misunderstood your question.
EDIT:
I would make a parent container for each star that is responsible for the width and height, and let the child base its width on the preferred percentage.
.star-row {
display: flex;
gap: 5px;
}
i {
color: yellow;
overflow: hidden;
}
.last-star {
width: 50%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div class="star-row">
<div class="star-container">
<i class="fas fa-2x fa-star"></i>
</div>
<div class="star-container">
<i class="fas fa-2x fa-star last-star"></i>
</div>
</div>
I cropped the stars using a span outside (and I replaced the div with span).
span{
display:flex;
justify-content: space-evenly;
overflow: hidden;
width: 95px;
}
i{
color: gold;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<span>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star" style="width:calc(36px / 2);"></i>
</span>
it's simple you just need to use negative for margin element.
margin-right:-18px;
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
span i{
margin-right:-18px;
}
span{
background:red;
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
Using clip-path can be a practical solution for this case.
It's not size dependent, and you can use any value between 0-100% for the --percentage variable.
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
i:last-child{
--percentage: 50%;
clip-path: polygon(0 0, var(--percentage) 0, var(--percentage) 100%, 0 100%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
If the last star bounding box is a concern, you should be able to achieve that by providing a width like this.
div{
display:flex;
justify-content: space-evenly;
width: 180px;
--star-count: 5;
--star-width: calc(100% / var(--star-count));
--last-star-crop: 1/2;
}
i{
width: var(--star-width);
color: yellow;
}
i:last-child{
width: calc(var(--star-width) * var(--last-star-crop));
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
Note: FontAwesome uses font-size to dictate icon sizing, due to that smaller container widths can cause distortion.
I know this question might be asked so many times, but i couldn't find the one.
I want to put two h3 tag and 1 div containing 5 rating stars in one line, i don't know how to achieve that.
which css style can be added to achieve this?
Here is the code:
<h3>Shop Name</h3>
<div>
<i class="fa fa-star active"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<h3>64 Sales</h3>
Use a FlexBox
.row {
display: flex;
align-items: center;
}
h3 {
margin-left: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<h2>Shop Name</h2>
<div class='row'>
<div>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<h3>64 Sales</h3>
</div>
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 5 years ago.
I have a <div> with two <div>s in it, but the first <div> called facePlus has a margin when you hover over it in the inspector, and when you scroll down to the table it says it doesn't have it:
.facePlus {
width: 50%;
margin-right: 0%;
}
.twittIn {
width: 50%;
position: absolute;
left: 50%;
}
.socialMedia {
display: inline;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
how can I put them next to each other?
use flexbox
.socialMedia {
display: flex;
}
.socialMedia>div {
flex: 1
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
Two approaches for you...
You can use the display property to place your divs side by side...
.facePlus {
width: 48%;
display: inline-block;
}
.twittIn {
width: 48%;
display: inline-block;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
Or you can use flexbox which you can read more about here:
.socialMedia {
display: flex;
}
.facePlus,
.twittIn {
flex: 1;
}
<div class="socialMedia">
<div class="facePlus">
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
</div>
<div class="twittIn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
<i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
</div>
</div>
I'm trying to get three divs to take up a third of the width each (33%) but when I resize the window they jump all over the place and don't line up correctly. What am I doing wrong?
HTML
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
CSS
.step{
width:33%;
height:200px;
display:inline-block;
}
.fa{
color:darkgray;
width:100%;
margin-top:5%;
}
i{
text-align:center;
}
.step p{
padding:5%;
text-align:center;
}
You need to use float:left; and remove display:inline-block;
Replace your .step css with the following
.step{width:33%; height:200px; float:left;}
the float property is very very commonly used. Though in my opinion it's a little unintuitive for beginners.
The problem is that the whitespace between the div elements also takes up space (because they are display:inline-block).
Solution 1: Remove the whitespace
Use html comments to remove the whitespace (also add vertical-align:top to keep them top aligned when they have different heights)
.step{
width:33%;
height:200px;
display:inline-block;
vertical-align:top;
}
.fa{
color:darkgray;
width:100%;
margin-top:5%;
}
i{
text-align:center;
}
.step p{
padding:5%;
text-align:center;
}
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div><!--
--><div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><!--
--><div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
Solution 2: Use float:left
.step{
width:33%;
height:200px;
float:left;
}
.fa{
color:darkgray;
width:100%;
margin-top:5%;
}
i{
text-align:center;
}
.step p{
padding:5%;
text-align:center;
}
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
Solution 3: use flexbox (most modern and more appropriate nowadays)
This needs a wrapper element.
.steps{display:flex}
.step {
height: 200px;
flex: 0 0 1;
}
.fa {
color: darkgray;
width: 100%;
margin-top: 5%;
}
i {
text-align: center;
}
.step p {
padding: 5%;
text-align: center;
}
<div class="steps">
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
</div>
This is a side-effect of using display: inline-block; instead of float.
When using inline-block, your browser will treat any line-breaks in your code as spaces, so what's actually rendering in your case is:
div (space) div (space) div
By removing the line-breaks in your code between your divs, you can resolve this. Or, you could use float: left; and a clearing element afterward.
Removing the line breaks: https://jsfiddle.net/qzdxtwhx/
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div><div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
Using float: https://jsfiddle.net/qzdxtwhx/1/
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
<div class="clear"></div>
.step{
width:33%;
height:200px;
float: left; /*Replace display: inline-block; */
}
.clear { /*Add a 'clear' element to preserve natural layout*/
clear: both;
}
Wrap them in a parent div and set that div's font-size to 0, this will get rid of the line breaks which are breaking the steps on to separate rows. You could use float's as Santi suggests but I actually prefer working with inline-block personally, I find it more bulletproof, floats need to be cleared and can't be vertically aligned.
<div class="parent">
<div class="step">
<i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
<p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
<i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
<p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
<i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
<p>Look out for links and prompts in our emails and newsletters</p>
</div>
</div>
CSS:
.parent{
font-size: 0;
}
I am newbie in Bootstrap & HTML.
In my HTML I have a container and a row with 3 columns inside. In my situation, the title of the last section is way longer than others and needs to be displayed in 2 lines.
Because of this, the text of this section is in lower position than it is in other sections.
My question: Is it possible to make all of these texts after headers to be vertically in the same position?
HTML Code example:
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted eqHeight"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted eqHeight"> TEXT_2</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_3</h4>
<div class="text-muted eqHeight"> TEXT_3</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_4</h4>
<div class="text-muted eqHeight"> TEXT_4</div>
</div>
</div>
</div>
This is how it looks like:
include jQuery and just write javascript for finding and setting the height of bigger one.
function max-height(){
var height=0;
var mHeight=0;
$('.service-heading').each(function(){
height = $(this).height();
if(height>mHeight)
mHeight = height;
});
$('.service-heading').height(mHeight);
height=0;
mHeight=0;
}
then call this function on ready() and resize()
$( document ).ready(function() {max-height();});
$( window ).resize(function() {max-height();});
in your code, text is aligned to center. i have removed it. check comment. then in the long text of title_title_title..so on, i have provided a space which encodes as newline character.
In the column setup, you have provided 'col-md-3' for three time, which makes it three-fourth of the width. so changed it to " col-md-3 , col-md-3 , col-md-6".
check out this.
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row "> // removed text-center
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted"> TEXT_2</div>
</div>
<div class="col-md-6"> // here col-md-3 changed to col-md-6
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE _TITLE_TITLE_TITLE_TITLE_ TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_3</h4> // here provided with a space.
<div class="text-muted"> TEXT_3</div>
</div>
</div>
</div>
Changed answer: Now that I get what you're asking here, I would recommend using eqHeight library (jQuery). It works like a charm with Bootstrap and what it does is that it automatically calculates the height of the tallest element and adjusts the height of others to same.
In this case you could do the following:
<div class="row">
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
</div>
The point is to make the eqHeight library point to the .eqHeight class and make it calculate the upper elements (in this case .service-heading classes) to be the same height.
This might require an additional CSS, but shouldn't be more than just height and max-height properties.
Vertical positioning is a slight problem with responsive design. Another solution for this would be of making an additional row below the existing one and setting the same cols in there, but that of course doesn't work when the site breaks up for mobile.