Bootstrap - my content has a large white space - html

As you can see here:
My content has a large white space. My content HTML is below. Not sure why it isn't aligning properly and has a large whitespace. Makes no sense. I'm using col-lg-6 an col-md-6, so it should do half & half all the time.
Any ideas?
<div class="tab-pane active" id="specification">
<ul class="productinfo">
<div class="col-lg-6 col-md-6">
<h3>Specs</h3>
<ul class="unstyled listoption5"><li>Single bag holds approx. 20 gallons of water. </li><li>Fits mininum 1 inch tree trunk up to a maximum 4 inch tree trunk (Zip 2 bags together to water 5 to 8 inch trees/2 bags=about 40 gallon setup) </li><li>Made of green polyethylene with nylon webbing, black polypro straps and green nylon zippers. </li><li>UV treated to withstand exposure to sunlight. </li><li>2 drip hole locations per bag-Standard drip time of 5 to 9 hours. </li><li>Fill opening fits up to 3" diameter hose.</li><li>Filled with water: 30" Tall x 18" Wide (at base)</li></ul>
</div>
<div class="col-lg-6 col-md-6">
<h3>Product Features</h3>
<ul class="unstyled listoption5">DIRECTIONS FOR USE: <li>Place on tree trunk, with the zippers on the uphill side of the tree. </li><li>Wrap both sides around trunk (1" to 4" dia. trunk*) until zippers meet. </li><li>Two 20 gal. bags zipped together back-to-back - Fits 5 to 8" dia. trunk </li><li>Zip sides of bag together from bottom to top. </li><li>Lift tag to expose fill opening at top of bag. </li><li>Insert hose into fill opening and begin filling with water. </li><li>Fill bag to 1/4 capacity, then gently lift up on straps at top of bag to
</li></ul></div>
<div class="col-lg-6 col-md-6">
<h3>Product Benefits</h3>
<ul class="unstyled listoption5"><li>No more guess work- Provides a professional watering every time. </li><li>Reduces watering frequency-Fill just once a week for most new tree plantings. </li><li>Reduces the amount of time spent at tree- Setup and fill in less than 5 minutes. </li><li>Saves water resources- 100% water absorption with little or no run-off. </li><li>Deep water penetration with each application- Promotes deep root growth and reduces transplant shock.</li></ul>
</div>
<div class="col-lg-6 col-md-6">
<h3>Warranty</h3>
5 Year limited manufacturer warranty from the date of purchase against defects in materials and workmanship.
</div>
<div class="col-lg-6 col-md-6">
<h3>Links</h3>
<a target="_blank" href="http://www.treegator.com/products/specs/TreegatorOrig_SpecSheet.pdf">Spec Sheet</a><br>Additional Product Specifications & Handling Precautions<br><a target="_blank" href="http://www.treegator.com/products/original/index.html">Double Bag Set Up</a>
</div>
<div class="col-lg-6 col-md-6">
<h3>Application Rates</h3>
Failure to Follow Handling Procedures May Void Manufacturer's Warranty - Do not hang and/or suspend bag from straps. - Before use, remove all sharp objects from area to be irrigated. - Use clean water only. If necessary, filter water through cotton cloth on hose end. - Do not unzip bag when full. - Do not tear or rip fill opening. - Treegator® is not a toy - Keep away from children. - If using water soluble fertilizers, be sure to pre-mix in a separate container before adding mixture to bag. - Treegator® is designed for use on mulch. Failure to do so can result in clogging of drip holes.
</div>
</ul>
</div>

Use the following code around every 2 columns:
<div class="row">...</div>
This will fix the layout, example: http://www.bootply.com/t8m0BopAkO

Related

Used span to style certain words in list. It shifted other element to next row. Why and how to fix?

I'm working on a basic bootstrap project.
I used a span tag to style certain words in my list. Like this:
<li>The agile feline <span class="text-info" style="font-size:30px"><strong> squeezed through</strong></span> the fence</li><br>
and in doing so, it shifted my other bullet list(on right hand side) and empty middle column down to the next row. It's supposed to go:
List ------ Empty middle column ------- List
But instead looks like this:
List
Empty middle column ------ List (<---with these ones on the next line; they should all be on same line)
Altogether, that section looks like this:
<div class="row bullet" style="margin-top:15px">
<div class="col-md-4 text-left">
<ul class="bg-success">
<li>Water is a<span class="text-info" style="font-size:30px"><strong> sacred element </strong></span> and the fundamental building block of ALL life</li><br>
<li><span class="text-info" style="font-size:30px"><strong>Water</span> in its purist form, <span class="text-info" style="font-size:30px"><strong>cleanses</span>; both externally and <span class="text-info" style="font-size:30px"><strong> spiritually</span></li><br>
<li><span class="text-info" style="font-size:30px"><strong>Preservation</span> of streams, springs and rivers <span class="text-info" style="font-size:30px"><strong>is vital</span></li><br>
<li>Approximately <span class="text-info" style="font-size:30px"><strong>400 billion gallons</span> of water are used every day in the United States</li><br>
<li>By 2025, half of the world’s population will be living in water-stressed areas.</li><br>
</ul>
</div><!--left list-->
<div class="col-md-4 text-center bg-danger"></div><!--empty mid column-->
<div class="col-md-4">
<ul class="bg-warning">
<li class="right">844 million people in the world- one in ten- do not have access to an improved source of drinking water</li><br>
<li class="right">Every minute a newborn baby dies from infection caused by a lack of clean water and an unclean environment. </li><br>
<li class="right">Collectively, South African women and children walk a daily distance equivalent to 16 trips to the moon and back to fetch water</li><br>
<li class="right">Globally, at least 2 billion people use a drinking-water source contaminated with feces</li><br>
</ul>
</div><!--right list-->
Everything was laid out as it was supposed to be until I styled certain words using the span tag. I've done searches upon searches and haven't been able to find clear information to assist me through this. And I can't find any documentation of this specific issue either. I also came across the usage of span inside of a div like: div class="span".....
Now I'm confused if it should be inside of another div or its own tag??...

Unable to "align" bootstrap rows

I'm currently building a responsive website with bootstrap but I've faced an issue, with reference to the code below, I'm unable to have them "align" with each other.
This rough sketch would be what I want my end result to turn out
<div class="container">
<div class="row-fluid">
<div class="col-sm-6 col-md-4">
<h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>2Mountain bike trials</h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>3Enduro</h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>4Freeride </h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>5Dirt jumping</h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>6Downhill mountain biking (DH)</h3>
<p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
</p>
</div>
</div>
</div>
view my JSFiddle here : https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/1/
Weiping Hi there.
You may find it better just to add 2 items per row.
You will run into a problem with using a fixed height with the text when the div is compressed.
Have a look at this FIDDLE HERE.
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<body>
<!--column examples-->
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths
connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>
<div class="col-md-4 col-sm-6">
<h3>2Mountain bike trials</h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials
riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars,
lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>
</div><!-- end row -->
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>3Enduro</h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner
is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>
<div class="col-md-4 col-sm-6">
<h3>4Freeride </h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control,
and speed.</p>
</div>
</div><!-- end row -->
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>5Dirt jumping</h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land
on the 'landing'.</p>
</div>
<div class="col-md-4 col-sm-6">
<h3>6Downhill mountain biking (DH)</h3>
<p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front
and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
</p>
</div>
</div><!-- end row -->
</div>
</body>
</body>
</html>
If you want horizontal align, you need same height, id est, you need to force the same height.
for example
.my-div{
height: 400px;
}
If you add the class my-div, in divs, class="col-sm-6 col-md-4 my-div"you can get the desired result, if the height of elements are less then 400px...
You can set the heights of all divs, using the next javascript + dom code (for example):
function set_max_height (){
var div = document.getElementById("main-row"); // main-row is the parent div of the list...
if(!div) return ;
var divs= div.getElementsByTagName("div");
if(!divs) return;
var L = divs.length;
var maxHeight = 0;
for(var i=0; i<L; i++){
var mh = divs[i].offsetHeight;
if(mh > maxHeight) maxHeight = mh;
}
for(var i=0; i<L; i++){
divs[i].style.height = maxHeight.toString() + "px";
}
}
You can use this function in a "onload" event, or in
According to the image you provided for the sketch you want I think this is what you are looking for:
<div class="container">
<div class="row">
<div class="col-sm-2">
<h3>1Cross-country cycling</h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>
<div class="col-sm-2">
<h3>2Mountain bike trials</h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h3>3Enduro</h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>
<div class="col-sm-2">
<h3>4Freeride </h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h3>5Dirt jumping</h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
</div>
<div class="col-sm-2">
<h3>6Downhill mountain biking (DH)</h3>
<p>
Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
</p>
</div>
</div>
</div>
I wanted the page to be as responsive as possible e.g. 3 cols for col-md, 2 for col-sm, and 1 for col-xs.
I used the script from Use jQuery/CSS to find the tallest of all elements to get the tallest height then set the height of the class to the tallest height.
$().ready(function() {
var maxHeight = 0;
$('.col-sm-6').each(function() {
maxHeight = maxHeight > $('.col-sm-6').height() ? maxHeight : $('.col-sm-6').height();
});
$('.col-sm-6').each(function() {
$('.col-sm-6').height(maxHeight);
});
console.log(maxHeight)
console.log("loaded")
})
Here's my solution in JSFiddle : https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/9/

How to centered bootstrap col-md-4 and col-md-5 in the middle of the page?

I have two bootstrap items one col-md-5 and one col-md-4. But i want to centered these two items in the middle of the page, both of them. Now my col-md-4 is at the left side of the page and the col-md-5 is at the middle of the page. Has anyone an idea how to centered these two items without use only margin.
<div class="col-md-4">
<div class="klantcases">
<h2>Company</h2>
<li>Over ons</li>
<li>Kernwaarden</li>
<li>Missie en visie</li>
<li>Nieuws</li>
<li>Blog</li>
<li>Development Blog</li>
<li>Marketing Blog</li>
<li>Development</li>
<li>Marketing</li>
<li><a href="#">Werken bij ons></li>
</div>
<div class="col-md-5">
<div class="blogpreview">
<img src="img/kan.png" alt="kan" /><h1>The latest from our</br>
DEVELOPMENT BLOG</h1>
<img src="img/bloglaptop.jpg" alt="bloglaptopcode" />
<div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br>
MARKETING BLOG</h1>
<img src="img/iphone.jpg" alt="iphonehand" />
<div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
</div>
You can offset columns in bootstrap. See Docs.
By using a class such as, col-md-offset-4 you can push your columns across the page.
In your case you would need to adjust your columns to make up an even total, e.g. col-md-4 and col-md-6, and then add col-md-offset-1 to offset the first column by 1 column.
Since the Bootstrap default grid has 12 columns, you cannot center the 9 columns grid with the default Bootstrap offsets. So all you need to do is create a custom 1.5 offset (which left margin would be equal to 1.5/12*100% = 12.5%) and apply it to the .col-md-4 container:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-custom">...</div>
<div class="col-md-5">...</div>
</div>
<!-- / .row -->
</div>
<!-- / .container -->
#media(min-width: 992px && max-width: 1199px) {
.col-md-offset-custom {
margin-left: 12.5%;
}
}
JSFiddle: http://jsfiddle.net/Lq06L4hb/2/

Boostrap Grid not aligned

I installed a bootstrap theme for Wordpress but I'm experiencing an issue with grid alignment.
See: Click Here in Products&Services.
'Seed' should be on the left and 'Other Products' on the right aligned with the second element 'LeafLine'.
What could that be?
You can also just add a clearfix element after the leafline div to fix this layout.
<div class="clearfix"></div>
More information can be found here: http://getbootstrap.com/css/#grid-responsive-resets
This is an easy fix. You just need to put the content into either two rows, or two columns. Because there is more text on the first left-side block, the Seed block is getting pushed out. You will just need to increase padding below the rows.
Example with rows: http://www.bootply.com/PjWnLEAOMT
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Primo</h3>
This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle. </div>
</div>
</div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">LeafLine</h3>
A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators. </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Seed</h3>
Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
<li>orbital maneuvers</li>
<li>re-orbiting</li>
<li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites. </div>
</div>
</div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Other Services</h3>
Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
<li>transportations</li>
<li>technical advice</li>
<li>satellite integration in the payload vain</li>
<li>safety and law issues</li>
</ul> </div>
</div>
</div>
</div>
Example with two columns: http://www.bootply.com/bms2sLZ1ZJ
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Primo</h3>
This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle. </div>
</div>
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Seed</h3>
Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
<li>orbital maneuvers</li>
<li>re-orbiting</li>
<li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites. </div>
</div></div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">LeafLine</h3>
A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators. </div>
</div><div class="media services">
<div class="media-body">
<h3 class="media-heading">Other Services</h3>
Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
<li>transportations</li>
<li>technical advice</li>
<li>satellite integration in the payload vain</li>
<li>safety and law issues</li>
</ul> </div>
</div></div>
</div>
Obviously the second produces a cleaner result as far as padding goes.

MYSQL Replace string between two known strings

Edit 1: I am trying to fetch using this below query but problem is that the end div is not taken the occurrence after the start Point i.e
select ID, post_title, substr(post_content,instr(post_content,'<div style="position:absolute') + 0, instr(post_content,'</div>')) as temp from wp_posts where post_content LIKE '%mySpamFilter Text%' LIMIT 10
One of my Blog has been attacked by spammers, I have around 100+ posts which have the unwanted links or messages which was fused by spammers. I want to know how can I replace the string between two strings.
Start string = '<div style="position:absolute;'
End String = '</div>' (This End div should be the first end div after the above Start string)
I tried all the options which is available on Stack overflow but no luck so far. Please advice whats the best approach to go ahead. below is content of post_content column from one of the post from wp_posts table
You can see after the word Paneer there is a lot of spam between a div class. I want to get rid of this from my database. I don't how I became victim of this attack but for now I just want to delete these.
<p>Hey Foodies,</p>
<p>Biryani, the pride of Hyderabad, is definitely one dish which everyone knows to cook in their very own ways and styles. Biryani is one such thing which totally distinguishes itself with the plain rice we eat daily and the regular pulao. Biryani is the BIRYANI. So, lets look into the detailed procedure of the much loved Hyderabadi delicacy, the vegetarian version. Oh yes, this is the Hyderabadi Dum Veg Biryani!</p>
<p>This recipe would take 380-400 grams of uncooked Basmati rice which would serve 6.</p>
<div class="easyrecipe">
<link itemprop="image" href="http://mywebsite.in/wp-content/uploads/2013/09/Biryani-300x225.jpg">
<div class="item ERName">Hyderabadi Veg Dum Biryani</div>
<div class="ERClear"></div>
<div class="ERHead"><span class="xlate">Recipe Type</span>: <span class="type">Main Course</span></div>
<div class="ERHead">Cuisine: <span class="cuisine">Indian</span></div>
<div class="ERHead">Prep time: <time itemprop="prepTime" datetime="PT30M">30 mins</time></div>
<div class="ERHead">Cook time: <time itemprop="cookTime" datetime="PT1H15M">1 hour 15 mins</time></div>
<div class="ERHead">Total time: <time itemprop="totalTime" datetime="PT1H45M">1 hour 45 mins</time></div>
<div class="ERHead">Serves: <span class="yield">6</span></div>
<div class="ERIngredients">
<div class="ERIngredientsHeader">Ingredients</div>
<ul class="ingredients">
<li class="ingredient">For Vegetables: Carrot - 1 medium</li>
<li class="ingredient">Potatoes - 1 medium</li>
<li class="ingredient">Paneer ***<div style="position:absolute; left:-3905px; top:-3984px;">Gloves fast it natural viagra foods recently! Like as daily cialis the purchase 1 pad generic viagra cheap and matte easy blue pills me many. Content but 10 mg cialis the as the helps Amazon http://www.mordellgardens.com/saha/cheap-viagra-canada.html . And baths etc would. I've brand cialis Appears dollars hands still shop October a smell http://www.hilobereans.com/buy-real-viagra/ in have. Of better cheap generic cialis it smelled to and <a rel="nofollow" href="http://www.goprorestoration.com/best-price-viagra">best price viagra</a> t customer anything been viagra online reviews 5 supply time "here" the product what buy levitra biological by cream!</div>*** - 1/2 cup</li>
<li class="ingredient">Cauliflower - 1/2 cup</li>
<li class="ingredient">Green peas - 1 tbsp.</li>
<li class="ingredient">Yogurt - 1/2 cup</li>
<li class="ingredient">Mint - 1 tbsp.</li>
<li class="ingredient">Coriander - 1 tbsp.</li>
<li class="ingredient">Ginger-Garlic paste - 1 tsp.</li>
<li class="ingredient">Green chili - 4 to 5</li>
<li class="ingredient">Oil - 2 tbsp</li>
<li class="ingredient">Salt - As per taste</li>
<li class="ingredient">Biryani Masala - 1 and 1/2 tbsp.</li>
<li class="ingredient">Red Chili Powder - 1/2 tsp.</li>
<li class="ingredient">Garam Masala Powder - 1/4 tsp.</li>
<li class="ingredient">Whole Garam Masala - Custom or readymade</li>
<li class="ingredient">For Rice: Basmati Rice(soaked for 1 hour) - 380 gms</li>
<li class="ingredient">Water - 6-8 cups</li>
<li class="ingredient">Oil - 1-2 Tbsp.</li>
<li class="ingredient">Whole Garam masala - Custom or readymade</li>
<li class="ingredient">Salt - 3 Tsp.</li>
<li class="ingredient">For Dum(Bringing together): Yogurt - 1/2 cup</li>
<li class="ingredient">Saffron strands - dipped in milk, a few</li>
<li class="ingredient">Chopped Nuts - As desired</li>
<li class="ingredient">Mint and Coriander - two handfuls</li>
<li class="ingredient">Fried onions - two handfuls</li>
<li class="ingredient">Green chili - 4-5 slits</li>
<li class="ingredient">Water - 1/4 cup</li>
</ul>
</div>
<div class="ERInstructions">
<div class="ERInstructionsHeader">Instructions</div>
<div class="instructions">
<ol>
<li class="instruction">For Veggies: In a kadhai add oil. Now add whole garam masala, ginger-garlic paste. Saute for a minute. Now add carrot, potatoes, cauliflower, peas and salt. Saute until they are lightly cooked.</li>
<li class="instruction">After the veggies are a bit cooked, add in biryani masala, red chili powder, garam masala powder and gradually add yogurt stirring well to prevent curdling of curd.</li>
<li class="instruction">Now add mint, coriander, paneer. Cook until the moisture gets dried out which was caused due to adding yogurt. This would take approx 5 minutes. Veggies should not be cooked completely as we will dum it later on. It should 70% cooked.</li>
<li class="instruction">After the moisture is dried, add some fried onions and transfer to a bowl.</li>
<li class="instruction">For Rice: Boil water. Add oil, whole garam masala, salt. Boil until roaring boil. Add the soaked rice. In about 3-4 minutes in high flame rice will be 70% done. Test by eating some if it has a bite but its tastes like cooked or press between ur fingers. If breaks into 2 parts its ready. Strain it and spread on a big plate.</li>
<li class="instruction">For Dum: Take a cooker, add half of the vegetables, yogurt, green chilli, a pinch of salt and some nuts. Let it heat. Now add a handful of mint coriander. Now top it off with a good layer of rice.</li>
<li class="instruction">Next add the remaining vegetables, remaining mint-coriander(leave 1 tsp. for top), fried onions and the rice. Spread the rice and add the saffron mixture with a bit of mint-coriander, fried onion.</li>
<li class="instruction">Now sprinkle 1/4 cup of water over it, Cover and cook for 2 minutes in lowest flame.</li>
<li class="instruction">Transfer the cooker to a big pot with some water. This water bath prevents the dum to get burnt.. In about 30-35 minutes the Biryani is ready to make you dig into it.</li>
</ol>
</div>
</div>
<div class="ERNutrition"></div>
<div>
<div class="ERNotesHeader">Notes</div>
<div class="ERNotes">Cut vegetables in a uniform size.[br]Veggies are less, but the rice is used more for Biryanis.[br]You could use raw chopped nuts or saute them in oil and add.[br]Make sure to soak rice for atleast 1 hour.</div>
</div>
<div class="endeasyrecipe" style="display: none;">3.2.1255</div>
</div>
<p> </p>
<p><img class=" wp-image-411 alignright" alt="Biryani-2" src="http://mywebsite.in.cp-25.webhostbox.net/wp-content/uploads/2013/09/Biryani-2.jpg" width="189" height="142"></p>
<p>Recipe Ingredients are lengthy.. But it looks only onscreen.. Once you start preparing them they does not seem long or more.. Basic Ingredients, Easy Recipe and Traditional Hyderabadi Taste.. Dont forget to try it, I am sure you'll love it and make it again and again!!!</p>
<p>Do Subscribe on YouTube</p>
<p>Like us on FB</p>
<p> </p>
<p>Video Recipe:</p>
<p><iframe src="//www.youtube.com/embed/zf0_AJfp5AA" height="500" width="835" allowfullscreen="" frameborder="0"></iframe></p>
the answer is variation of the following:
update wp_posts
set post_content = CONCAT(LEFT(post_content, LOCATE('div style=', post_content)-1),
SUBSTRING(post_content, LOCATE('</div>', post_content)+7))
where LOCATE('div style=', post_content) > 0
Changing the "div style" to whatever beginning that works.
Your query is close, but you need to use LOCATE as well as INSTR to find the end of the embedded string:
select
ID,
post_title,
substr(post_content,
instr(post_content,'<div style="position:absolute'),
LOCATE('</div>',post_content,instr(post_content,'<div style="position:absolute')+30)-instr(post_content,'<div style="position:absolute')
+6) as temp
from wp_posts
where post_content LIKE '%<div style="position:absolute%'
LIMIT 10
See example here: http://sqlfiddle.com/#!2/d0cf2f/13
You can use the following query for this replacement:
UPDATE Customer SET address = REPLACE(address, substring_index(substring_index(address, 'prefixString', -1), 'postfixString', 1), '') WHERE address IS NOT NULL;
For Example:
address: Black booster deer street
replace booster with an empty string.
UPDATE Customer SET address = REPLACE(address, substring_index(substring_index(address, 'Black', -1), 'deer', 1), ' ') WHERE address IS NOT NULL;