Can you please help me understand how to align images horizontally across different divs in the same row regardless of the inner content of the div?
I've tried absolute positioning, but I'm required for this interview test to keep everything within the inner div container.
Example:
<div class="row">
<div class="col-md-3 product-box">
<div class="col-md-12 background-contain">
<p class="blue-title">Product Title 1</p>
Staring at $500
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<div class="img-contain">
<img src="materials/images/cereal_b.jpg" class="img-responsive" alt="cereal" />
</div>
<a class="bottom-link">Learn More</a>
</div>
</div>
<div class="col-md-3 product-box">
<div class="col-md-12 background-contain">
<p class="blue-title">Product Title 2</p>
Staring at 1900
<br> Donec ornare magna sit amet erat molestie sollicitudin ac vitae lectus.</br>
<img src="materials/images/flower_b.jpg" class="img-responsive" alt="cereal" />
<a class="bottom-link">Learn More</a>
</div>
</div>
<div class="col-md-3 product-box">
<div class="col-md-12 background-contain">
<p class="blue-title">Product Title 3</p>
Staring at 1900
<br> Cras non metus sed odio tristique imperdiet.</br>
<img src="materials/images/machine_b.jpg" class="img-responsive" alt="cereal" />
<a class="bottom-link">Learn More</a>
</div>
</div>
<div class="col-md-3 product-box">
<div class="col-md-12 background-contain">
<p class="blue-title">Product Title 4</p>
Staring at 1900
<br> Pellentesque mattis tellus ut molestie dapibus.</br>
<img src="materials/images/candy_b.jpg" class="img-responsive" alt="cereal" />
<a class="bottom-link">Learn More</a>
</div>
</div>
</div>
</div>
Try to use Bootstrap class -"container-fluid".
Here is jsfiddle: https://jsfiddle.net/z5v6t048/
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 product-box">
<div class="col-md-12 background-contain">
<p class="blue-title">Product Title 1</p>
Staring at $500
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<div class="img-contain">
<img src="materials/images/cereal_b.jpg" class="img-responsive" alt="cereal" />
</div>
<a class="bottom-link">Learn More</a>
</div>
</div>
<div class="col-sm-6 product-box">
<div class="col-md-12 background-contain">
<p class="blue-title">Product Title 2</p>
Staring at 1900
<br/> Donec ornare magna sit amet erat molestie sollicitudin ac vitae lectus.
<img src="materials/images/flower_b.jpg" class="img-responsive" alt="cereal" />
<a class="bottom-link">Learn More</a>
</div>
</div>
</div>
Related
I'm trying to create a grid system but I can't figure how to put the columns. To be more clear, I want the horizontal cards to be one under another without being divided. I tried changing the orded of the blocks but didn't seem to work at all. I'm using Bootstrap 4.
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="card">
<div class="card-header card-header-text card-header-warning">
<div class="card-text">
Welcome back, <b><?php echo $display_name; ?></b>!
</div>
</div>
<div class="card-body">
<h4 class="card-title">Info</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc..
</p>
<footer class="blockquote-footer">Lorem</footer>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header card-header-text card-header-danger">
<div class="card-text">
<h4 class="card-title">News</h4>
</div>
</div>
<?php
while($row = $stmtNews->fetch(PDO::FETCH_ASSOC)){
$row['date'] = date('j M', strtotime($row['date']));
?>
<div class="card-body" style="max-height: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<?php echo $row['news']; ?>
<div class="card-footer">
<div class="card-text">
<small class="text-time"><?php echo $row['date']; ?></em></small>
</div>
</div>
</div>
<div class="dropdown-divider" style="margin: 15px;"></div>
<?php
}
?>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="card">
<div class="card-header card-header-text card-header-warning">
<div class="card-text">
Welcome back, <b><?php echo $display_name; ?></b>!
</div>
</div>
<div class="card-body">
<h4 class="card-title">Info</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc...
</p>
<footer class="blockquote-footer">Lorem</footer>
</div>
</div>
</div>
</div>
I don't know exactly what you want to achieve, but maybe this approach could help you:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-sm-12">
Level 2: .col-12
</div>
<div class="col-sm-12">
Level 2: .col-12
</div>
</div>
</div>
<div class="col-sm-2">
Level 1: .col-sm-2
<div class="row">
<div class="col-sm-12">
Level 2: .col-12 with defined or dynamic height
</div>
</div>
</div>
</div>
It results in this grid:
It may not be the best idea, but it may be a first approach to solve your problem.
I am trying to get 2 classes that are under each other to get next to each other.
Here is a screenshot of the 2 classes:
The right class is .testm_boxes1. The left class is .testm_boxes2
Here is the HTML and CSS:
.testm_boxes1 {
text-align: center;
float: right !important;
}
.testm_boxes2 {
text-align: center;
float: left !important;
}
<div class="wpb_wrapper">
<h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have a container .vc_row around each of your testm boxes.
<div class="wpb_wrapper">
<div class="vc_row other_classes">
<div class="testm_boxes1 other_classes">
content
</div>
</div>
<div class="vc_row other_classes">
<div class="testm_boxes2 other_classes">
content
</div>
</div>
</div>
You need to move the .testm_boxesX class to the .vc_row container.
<div class="wpb_wrapper">
<div class="vc_row testm_boxes1 other_classes">
<div class="other_classes">
content
</div>
</div>
<div class="vc_row testm_boxes2 other_classes">
<div class="other_classes">
content
</div>
</div>
</div>
This way the two containers can sit next to each other.
The CSS float:left and float:right will push the content to either side, but you must set a width to the floated items.
Set width: 50%; to both .testm_boxes1 and .testm_boxes2 in your CSS.
See jsfiddle with these changes applied to your code:
http://jsfiddle.net/r7yk8ao8/
You can place the two elements next to each other by adding one style setting that limits each elements' max width to less than half the width of the screen, like so:
max-width: 49%;
Here is a working example:
.testm_boxes1 {
text-align: center;
float: right !important;
max-width: 49%;
}
.testm_boxes2 {
text-align: center;
float: left !important;
max-width: 49%;
}
<div class="wpb_wrapper">
<h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="ult-just-icon-wrapper ">
<div class="align-icon" style="text-align:center;">
<div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
<i class="Defaults-quote-left"></i>
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
<blockquote>
<p>
<em>-John Doe</em>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to use 3 card to display the latest news on the site. On wide screen it looks fine like this
however when I resize the page to the content overflow from the card
this the the code snipplet
<div class="row">
<div class="col s4">
<div class="card small">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[2]->title; ?></h5>
<p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
</div> </div>
</div>
</div>
<div class="col s4">
<div class="card small">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[1]->title; ?></h5>
<p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
</div> </div>
</div>
</div>
<div class="col s4">
<div class="card small">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">settings</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[0]->title; ?></h5>
<p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
It is because you have the class small added to your cards. Remove that class and the cards will resize with your content. When working with Materialize cards, the classes small, medium and large all limit the height of the card, no matter the content.
Also, to get a more responsive look, you should think about changing your col classes up to look something like this, and add a container div, which helps you center and contain your content:
<div class="container">
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[2]->title; ?></h5>
<p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
</div>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[1]->title; ?></h5>
<p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
</div>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">settings</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[0]->title; ?></h5>
<p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try putting the .icon-block div inside a .card-content. If the problem still persists try getting rid of the .icon-block class just to see how the cards react without it.
Using a div with the class .card-content will give your card padding of 20px evenly around the all the content inside, and an overlflow:hidden. This should give structure to your card.
<div class="row">
<div class="col s4">
<div class="card ">
<!-- card-content- gives padding and overflow hidden to the content inside -->
<div class="card-content">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
<div class="card-content">
<h5 class="center"><?php echo $children[2]->title; ?></h5>
<p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
Also as the screen gets smaller in size you may want to have the cards adjust to medium and small devices, instead of having 3 cards in a row on small and medium devices, which is why the text gets bunched and becomes not so user friendly. You could do something like this to always keep the width of the cards very close. The only downside is if you don't want the cards to stack as it gets smaller.
<div class="row">
<!-- notice columns for each device size - small - medium -large -->
<div class="col s10 offset-s1 m6 l4">
<div class="card">
<div class="card-content">
<div class="icon-block">
<!-- I changed the size of the icon to .medium -->
<!-- Sizes you can use .tiny .smal .medium .large -->
<h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
<!-- give the card-title class to your titles -->
<div class="card-title">
<h5 class="center">Title</h5>
</div>
<p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
a erat rutrum pellentesque.</p>
</div>
</div>
</div>
</div>
<!-- notice columns for each device size - small - medium -large -->
<div class="col s10 offset-s1 m6 l4">
<div class="card ">
<div class="card-content">
<div class="icon-block">
<!-- I changed the size of the icon to .medium -->
<!-- Sizes you can use .tiny .smal .medium .large -->
<h2 class="center brown-text"><i class="material-icons medium">group</i></h2>
<!-- give the card-title class to your titles -->
<div class="card-title">
<h5 class="center">Title</h5>
</div>
<p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
a erat rutrum pellentesque.</p>
</div>
</div>
</div>
</div>
<!-- notice columns for each device size - small - medium -large -->
<!-- 0n medium size it offsets this card to center it on the next row keeping all cards the same size no matter the row -->
<div class="col s10 offset-s1 m6 offset-m3 l4">
<div class="card ">
<div class="card-content">
<div class="icon-block">
<!-- I changed the size of the icon to .medium -->
<!-- Sizes you can use .tiny .smal .medium .large -->
<h2 class="center brown-text"><i class="material-icons medium">settings</i></h2>
<!-- give the card-title class to your titles -->
<div class="card-title">
<h5 class="center">Title</h5>
</div>
<p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
a erat rutrum pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
Working Example
If the problem still persists update your question with the your css.
so i want a carousel that should take full height and width of the display monitor and then scroll down. like this, and the images inside should fill its parent while maintaining ratio. the problem is either i have to provide fixed height or it will take the height of largest image. so how can i make a carousel of full screen for every device.
$(document).ready(function() {
$("#my-slider").carousel({
interval : 3000,
pause: false
});
})
.container-fluid {
padding-right: 0px;
padding-left: 0px;
margin-right: 0px;
margin-left: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row" style="margin-right:0px; margin-left:0px;">
<div class="col-sm-12" style="padding:0px;">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/image1.jpg"/>
</div>
<div class="item">
<img src="img/image2.jpg"/>
</div>
<div class="item">
<img src="img/image3.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top:20px;">
<div class="row">
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-4 col-md-4 col-xs-12 image-container">
<center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
</div>
<div class="col-sm-8 col-md-8 col-xs-12">
<h2>Sample heading</h2>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-4 col-md-4 col-sm-push-8 col-xs-12 image-container">
<center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
</div>
<div class="col-sm-8 col-md-8 col-sm-pull-4 col-xs-12">
<h2>Sample heading</h2>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-4 col-md-4 col-xs-12 image-container">
<center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
</div>
<div class="col-sm-8 col-md-8 col-xs-12">
<h2>Sample heading</h2>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Contact Us</h2>
<form action="" method="" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input id ="name" type="name" name="" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input id ="email" type="email" name="" class="form-control"></div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<input id ="message" type="message" name="" class="form-control"></div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-push-2">
<input id ="submit" type="submit" name="" class="btn btn-default"/>
</div>
</div>
</form>
</div>
</div>
</div>
You have to use jquery for this, As when your site load you need to get height and width of viewport. And then apply that height and width to your carosel.
use this code and change the carosel class for yourself.
$(function(){
var height = $(window).height();
var width = $(window).width();
$(".yourCarosel").css(
{
"height":height,
"width":width
});
});
It will automatically get the height and width of window and apply that also on the carosel.
The bootstrap grid layout below shows that in its large configuration, there are 9 elements, arranged like this:
[Glyph 1] [Glyph 2] [Glyph 3]
[Title 1] [Title 2] [Title 3]
[Text 1] [Text 2] [Text 3]
The text boxes have a coloured background. I would like this coloured background to be the same size for each text box, even when there are more lines of text in one of the boxes. It looks as though .row-eq-height would be a good start, but of course all my large text divs aren't in the same row and there are other divs in the rows too.
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text 1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Much Longer text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed turpis quis lacus sagittis aliquam mollis at ipsum. Ut a blandit metus, et aliquet nunc. Ut commodo lorem tortor, ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12">
<p class="lead">Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
Any Suggestions would be much appreciated.
Sorry about the last post, you can use Jquery to get even heights.
P:S does not work well in the code snippet. Probably coz not added the bootstrap JS library
$(document).ready(function() {
var h = new Array();
h[0] = $(".eqheight1").height();
h[1] = $(".eqheight2").height();
h[2] = $(".eqheight3").height();
var largest = h.sort(function(a, b) {
return a - b
}).slice(-1);
$(".eqheight3,eqheight2,.eqheight1").height(largest);
});
.eqheight1,
.eqheight2,
.eqheight3 {
background: #cfcfcf;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12 eqheight1">
<p class="lead">Text 1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12 eqheight2">
<p class="lead">Much Longer text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed turpis quis lacus sagittis aliquam mollis at ipsum. Ut a blandit metus, et aliquet nunc. Ut commodo lorem tortor, ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12 eqheight3">
<p class="lead">Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>