How to Extract a specific data from html source - vb.net

I want to extract some textual data from a HTML page programatically. I am using vb.net 2008 webbrowser controls to programatically capturing that data. The HTML code of the webpage is given below
<div id="main-div"> <div id="top_header"> <div style="height: 85px;"> <div style="float: left; width: 400px; height: 80px;"><img src="cc/elance.png" width="318" height="80">1</div> <div style="float: left;"> <div class="trebuchet-23"><img src="images/logo.png"></div> <div style="height: 20px; padding-left: 315px;"> <div class="arial-12-left">Sitemap</div> <div class="arial-12-left">-</div> <div class="arial-12-left">Location</div> </div> </div> </div> </div> <div id="menu-div"> <div id="menu-left"></div> <div id="menu-middle"> <div id="menu-inside"> <div id="menu-ov">Home</div> <div class="menu-line"></div> <div id="menu-bt">About Us</div> <div class="menu-line"></div> <div id="menu-bt">Member Login </div> <div class="menu-line"></div> <div id="menu-bt">Contractors</div> <div class="menu-line"></div> <div id="menu-bt">Contact</div> </div> <div id="search-bg"> </div> </div> <div id="menu-right"></div> </div> <div style="margin-bottom: 20px;"><img src="images/banner.jpg" width="890" height="336"></div> <div id="inside-div"> <div id="about-div"> <div id="about-left"></div> <div id="about-middle"> <div class="heading-div"> <div class="white-20">Welcom To</div> <div class="red-20"><img src="cc/elance.png" width="398" height="81"></div> </div> <div class="myriad-22"></div> <div style="height: 220px;"> <div style="float: left; margin-right: 10px;"> <font color="#ffffff" size="+2">Assignment Report</font><br><font color="#ffffff">Assignment No.1</font><br><font color="#ffffff">Total Posts 341</font><br><hr>
***<font color="#ffffff">Pin Code = HF5O6</font><br><font color="#ffffff">TITLE = Xbox 360 with 20GB HDD + 2 wireless controllers + 8 Games + Wireless Headset + Guitar in Eastry</font><br><font color="#ffffff">DATE = 09/08/2012</font><br><font color="#ffffff">Tracking Key = 85265E712050-15152226115354753</font><br>***
<form name="form1" method="post" action="/dflogin.php"><input name="txtId" value="E712050-15" type="hidden"><input name="txtassId" value="1" type="hidden"><input name="txtPsw" value="HH29" type="hidden"><input name="txtLog" value="0" type="hidden"><hr><font color="#ffffff">*Please copy tracking key exact as it is. We track your report through this key.</font><br><h6 align="right"><input name="btnSub" value="Next" style="background-color: rgb(0, 153, 0); color: rgb(255, 255, 255);" type="SUBMIT"></h6></form> </div> <div style="float: left;"> <div class="Tre-13-gray" style="width: 280px;"></div> <div class="bt-read2"></div> </div> </div> </div> <div id="about-right"></div> </div> </div> <div id="footer-div"> <div id="footer-left"></div> <div id="footer-middle"> <!--<div style="float:left; padding-top:35px; margin-right:15px;"> <div class="white-20">Contact</div> <div class="red-20">us</div> </div>--> <div style="float: left; padding-top: 15px;"> <div style="height: 30px;"> <!--<div class="Tre-13-red2" style="width:120px;">Mailing address:</div> <div class="Tre-13-gray2" style="width:400px;">admin#eoprojects.com</div>--> </div> <!-- <div class="Tre-13-gray3">General Pricing and Service information:<br /> </div> <div class="Tre-13-red2" style="width:255px;">General Operations Director/ Sales:</div> <div class="Tre-13-gray2" style="width:300px;">eoprojects.com</div>--> </div> <div style="float: left; padding-left: 312px;"> <div style="height: 69px; width: 90px;"> <div style="float: left; padding-top: 20px; padding-right: 15px;"><img src="images/icon_f.png" width="34" height="35"></div> <div style="float: left; padding-top: 20px;"><img src="images/icon_t.png" width="34" height="35"></div> </div> <div class="arial-11">© 2010 All Copyrights Reserved</div> </div> </div> <div id="footer-right">1</div> </div> </div>
The line starting with stars is that line which I want to extract from the following code.
Can any one plz tell me what code I should write to extract that ?
Thanks in advance.

You need to parse the HTML. There's a free tool called HtmlAgilityPack in .NET designed specially to do this for you. Something like the following should work (this assumes you have a variable rawHtml which stores your HTML code):
Dim parsedHtml As New HtmlDocument()
parsedHtml.Load(rawHtml)
Dim fontNode As HtmlNode = parsedHtml.DocumentNode.Descendants("/font")

The sample code below extracts the IP address from a website.
Option Explicit
' Add Microsoft Internet Transfer Control
Dim pubIPA As String, pos1 As Long, pos2 As Long, str As String
Private Sub Form_Load()
str = Inet1.OpenURL("http://api.externalip.net/ip/", icString)
pos1 = InStr(str, "var ip =")
pos1 = InStr(pos1 + 1, str, "'", vbTextCompare) + 1
pos2 = InStr(pos1 + 1, str, "'", vbTextCompare)
pubIPA = Mid$(str, pos1, pos2 - pos1)
MsgBox pubIPA, vbInformation
Unload Me
End Sub

Related

Unable to enter value in search box using selenium via VBA

Hi I am new to selenium via VBA, so I am trying to automate a process by loging into a webpage navigate and get data extracted into the excel file. the problem is after login i am unable to input values in a search box.
Here are the codes i have tried
bot.FindElementById("placeholder-3vgh2").SendKeys "AAA"
bot.FindElementByClass(".public-DraftStyleDefault-block.public-DraftStyleDefault-ltr").SendKeys "AAA"
bot.FindElementByClass("public-DraftStyleDefault-block public-DraftStyleDefault-ltr").SendKeys "AAA"
bot.FindElementByXPath("//*[#data-contents='true']").SendKeys "AAA"
bot.FindElementByXPath("//*[#class='public-DraftStyleDefault-block public-DraftStyleDefault-ltr']").SendKeys "AAA"
bot.FindElementByXPath("//*[#data-offset-key='dtaef-0-0'][2]").SendKeys "AAA"
Here is HTML Code
<div class="db-World-topContent Box-root Box-background--surface Padding-vertical--20">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-justifyContent--spaceBetween">
<div class="db-SearchField db-SearchField--tokenizable">
<div class="db-SearchField-input db-SearchField-input--highlighted">
<div class="DraftEditor-root">
<div class="DraftEditor-editorContainer">
<div aria-describedby="placeholder-3vgh2" class="notranslate public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="false" style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;">
<div data-contents="true">
<div class="" data-block="true" data-editor="3vgh2" data-offset-key="dtaef-0-0">
<div data-offset-key="dtaef-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span class="db-SearchField-token" data-offset-key="dtaef-0-0"><span data-offset-key="dtaef-0-0"><span data-text="true">is:</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div><span></span><span></span></div><span></span></div>
<div class="Box-root">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-direction--row Flex-justifyContent--flexStart" style="margin-left: -12px;">
<div class="Box-root Box-hideIfEmpty Margin-left--12"></div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div class="Box-root Padding-right--8">
<div class="db-FeedbackInput-container Card-root Card-shadow--small">
<div class="db-FeedbackInput-box Box-root Box-background--offset Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center">
<div class="Box-root Margin-right--8 Flex-flex"><span class="db-FeedbackInput-defaultIcon"></span></div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--gray400 Text-fontSize--14 Text-fontWeight--regular Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--inline"><span>Feedback about this page?</span></span>
</div>
</div>
</div>
</div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div>
<div class="Box-root Flex-flex">
<div class="Box-root Flex-flex"><button aria-label="Documentation" class="db-DocumentationMenu-root" tabindex="-1"></button></div>
</div>
</div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div>
<div class="Box-root Flex-flex">
<div class="Box-root Flex-flex">
<div tabindex="-1" style="outline: none;"><button aria-label="Notifications" class="db-Notifications-button"><span class="db-Notifications-icon db-Notifications-icon--empty"></span></button></div>
</div>
</div>
</div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div>
<div class="Box-root Flex-flex">
<div class="Box-root Flex-flex"><button class="bs-Button bs-DeprecatedButton db-UserMenu" aria-label="User menu" type="button" tabindex="-1"><div class="db-GravatarImage db-UserMenu-image db-GravatarImage--none"></div></button></div>
</div>
</div>
</div>
</div>
</div>
</div><span class="db-World-topContent--left"></span><span class="db-World-topContent--right"></span></div>
Here is the outerHTML of iframe:
<iframe src="https://js.stripe.com/v2/m/outer.html#ping=false" style="width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;"></iframe>
Try, following our debug session:
bot.FindElementByCss(".notranslate.public-DraftEditor-content").SendKeys "AAA"

Selenium:- Popup handelling in HTML

I am using Firefox Quantum.
It's something different than Mozzila firefox. I can't use firebug now as it is not supporting.How can i verify that the i am on a different frame.
As currently i can't write on the popup message. Maybe it is on different frame.
Can anyone explain me with proper example.
The HTMLM of the code is:-
<div class="store_form">
<div class="row">
<div class="col s12 m12 marg-top">
<div class="row">
<div class="col s12 m6 store_band_contact">
</div>
<div class="col s12 m6 store_add_left">
</div>
</div>
</div>
<form id="form_contact" class="col s12 m12" novalidate="novalidate">
<div id="errorMsg"></div>
<!-- <div class="row">
<p class="col s12" style="font-size: 15px;" >
<strong id="buyer_company"></strong>
</p>
</div> -->
<!-- <div class="row">
<p class="col s12" id="">Subject: Request to remove my bid
</p>
</div> -->
<div class="row">
<div class="input-field col s12">
<span class="editFiledHeading">Request to remove my bid</span>
<!-- Contact Seller -->
<textarea name="comment" maxlength="20000" id="comment" class="ckeditor" placeholder="" style="visibility: hidden; display: none;"></textarea><div id="cke_comment" class="cke_1 cke cke_reset cke_chrome cke_editor_comment cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_comment_arialbl" style="width: 99.8%;"><span id="cke_comment_arialbl" class="cke_voice_label">Rich Text Editor, comment</span><div class="cke_inner cke_reset" role="presentation"><span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;"><span id="cke_12" class="cke_voice_label">Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_12" onmousedown="return false;"></span></span><div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_16" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, comment" aria-describedby="cke_16" tabindex="0" allowtransparency="true" style="width: 439px; height: 100%;"></iframe></div></div></div>
<input type="hidden" name="bid" id="bid_id" value="1035">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col s6">
<p style="margin: 5px 0 0;">
<input type="checkbox" name="is_copy" id="is_copy" value="1">
<label for="is_copy">Send me a copy</label>
</p>
</div>
<div class="col s6">
<span class="right remainingLimit" id="comment_label" data-length="2500">Remaining: 2500</span>
</div>
</div>
<div class="row">
<div class="col s12">
<p class="defaultP">
If you like to remove a bid you can do that by
sending the request to the seller. Please make
sure that you state the reason for doing this.
Obvious accidents by using the wrong value are
easy to justify.
Please note that it is up to the seller to accept
or decline your request!
</p>
</div>
</div>
<div class="row">
<div class="col s12 center" style="margin: 20px 0 15px;">
<button class="transParentBtnSmall">Submit</button>
</div>
</div>
</form>
</div>
</div>

PDF file created using snappy is not displayed well

I am creating a pdf file using snappy1.4,
I want create 2 pages ,each of them divided in 2 parts (vertically),
I have created them: when they are empty its ok but when I fill for example a part1 with some data the part2 is shifted down.
How can I fix the 4 parts in a way that they still fixed (in hight) if they are empty or some of them filled
example1 with empty data (ok):
shifted pdf:
My code:
return new Response(
$this->get('knp_snappy.pdf')->getOutputFromHtml($html,array(
'orientation'=>'Landscape',
'default-header'=>null,
// 'custom-header' =>false,
//'page-size' =>'A4',
// 'no-custom-header-propagation'=>false,
'encoding' => 'utf-8',
'images' => true,
'enable-javascript' => true,
'margin-right' => 1,
'margin-left' =>2,
'margin-top' =>0,
'margin-bottom' =>0,
'javascript-delay' => 5000
)),
200,
array(
'Content-Type' => 'application/pdf',
'Content-Disposition' => 'attachment; filename="file1.pdf"'
)
);
my twig:
<body>
<div style=" padding-left:3em;margin-top: 10px;display:inline-block;height: 0.3in ">
<div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px " src="{{ absolute_url(asset('images/visa.png' ))}} " id="imgtun"></div>
</div>
<div style=" padding-left:20em;margin-top: 10px;display:inline-block;height: 0.3in">
<div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px " src="{{ absolute_url(asset('images/visa.png' ))}} " id="imgcenter"></div>
<div style=" display:inline-block;font-size: 20px; font-weight: bold;vertical-align: middle; text-align: center;height: 0.3in">
<span style="text-align: center">My file with 4 parts </span></div>
</div>
<div id="Page1" style="width: 100%; height: 7.8in">
<div id="Partie_presentation" style="display:inline-block;height: 7.8in; width: 30%">
<div style="height:0.3in" id="header_presentation">
<p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
Part1</p>
</div>
<div style="height: 7.5in" id="partie_presentation" >
<div style="height:1.8in">
<p>
<span class="detailtitre" style="font-weight: bold">Adress :</span>
<span class="detailcont">My adress</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">Tél :</span>
<span class="detailcont">3389652368</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">E-mail :</span>
<span class="detailcont">email#gmail.com</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">Website :</span>
<span class="detailcont">my webste</span>
</p>
</div>
</div>
</div>
<div id="Part2"style="height: 7.8in; display:inline-block;width: 69%">
<div style="height:0.3in" id="entete_res">
<p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
Part2</p>
</div>
<div style="height: 7.5in" id="partie_res" >
<div id="partie_budget" style="height: 3.8in">
</div>
<div id="partie_pers" style="height: 4in">
</div>
</div>
</div>
</div>{#end page1#}
<div id="Page2" style="width: 100%; height: 8.1in">
{# partie_ac #}
<div id="Part3" style=" margin-top:2px;display:inline-block;height: 8.1in; width: 49%">
<div style="height: 0.3in">
<p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
Part3</p>
</div>
<div style="height: 7.8in" id="partie_ac" >
</div>
</div>
{# partie_per #}
<div id="Part4" style="display:inline-block;height: 8.1in; width: 50%">
<div style="height: 0.3in">
<p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
Part4</p>
</div>
<div style="height: 7.8in" id="partie_per" >
</div>
</div>
</div>
</body>
This is a CSS problem. Here's one way to fix it:
#Partie_presentation {
float: left;
}
#Part2 {
float: right; /* or left */
}
See JSFiddle
If it's possible in your case (I don't know how Snappy works), move the CSS styles to a <style> tag or to a separate CSS file. Now you are using inline styles so the HTML is very messy.

yii2 html to pdf widget unable to match css code

I am new to Yii2. What I am working now is generating PDF with some widget like html2pdf and mpdf. I have my HTML and CSS code very well displayed in IE (client's requirement), shown as below picture.
HTML and CSS displayed in IE Browser
When I generate the PDF file, it was a mess.
Generated PDF File using html2pdf
I was assigning full HTML content into a variable like this in my controller.
public function actionReport()
{
$username = Yii::$app->user->identity->username;
$html = <<<HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#bop_event{
border:outset thin black;
padding: 1% 1% 1% 1%;
width: 18cm;
height: 29.7cm;
}
#logo{
//border:outset thin black;
display: block;
}
.logo,.hidden_logo{
display:inline-block;
width:32%;
padding:1% 1% 1% 1%;
// border: outset thin red;
}
.hidden_logo{
visibility:hidden;
}
#bop_title{
border:outset thin black;
padding:5px 5px 5px 5px;
text-align:center;
margin-bottom:1%;
}
#bop_desc{
border:outset thin black;
padding:5px 5px 5px 5px;
font-size:1.2em;
margin-bottom:3%;
}
.subcontent_area{
margin-bottom:3%;
}
.subcontent_title,#signature{
font-size:1.2em;
font-weight:bold;
}
.field{
display: inline-block;
font-size:1em;
width:30%;
border:outset thin black;
margin-bottom:1%;
//margin-right:1%;
}
.field_title{
font-weight:bold;
border-bottom: outset thin;
padding-left:2%;
}
.field_data{
padding-left:2%;
}
.hidden_field{
visibility:hidden;
display:inline-block;
width:30%;
}
#place_sign{
text-align:center;
/*width:31%;*/
}
.sign,.hidden_sign{
display:inline-block;
/*width:28%;*/
text-align:center;
// border: outset thin red;
}
.person{
/*margin-top:27%;*/
width:relative;
// border: outset thin black;
}
.hidden_sign{
visibility:hidden;
}
</style>
</head>
<body>
<div id="bop_event">
<div id="logo">
<div class="logo" >
<img src="images\rpt_axa_logo_left_bg.png" align="left" />
</div>
<div class="hidden_logo" ></div>
<div class="logo" >
<img src="images\rpt_mandiri_axa_logo_right_bg.png" align="right" />
</div>
</div>
<div id="bop_title">
<h1><b>BOP Event Proposal</b></h1>
</div>
<div id="bop_desc">
Dengan ini saya yang bertanda tangan di bawah ini mengajukan permohonan untuk penggantian biaya BOP yang akan diselenggarakan dengan detil sebagai berikut.
</div>
<div id="konten">
<div id="event_budget" class='subcontent_area'>
<div class="subcontent_title">
Detil Event dan Budget
</div>
<div class="field">
<div class="field_title">Tanggal BOP</div>
<div class="field_data">31 Maret 2017</div>
</div>
<div class="field">
<div class="field_title">Jenis BOP</div>
<div class="field_data">Reguler BOP</div>
</div>
<div class="field">
<div class="field_title">Total Biaya</div>
<div class="field_data">Rp3.000.000,-</div>
</div>
<div class="field">
<div class="field_title">Kota</div>
<div class="field_data">Jakarta</div>
</div>
<!--<div class="field">
<div class="field_title">Tempat Pelaksanaan</div>
<div class="field_data">AXA Tower</div>
</div>-->
</div>
<div id="speaker_pic" class='subcontent_area'>
<div class="subcontent_title">
Pembicara dan PIC
</div>
<div class="field">
<div class="field_title">Pembicara</div>
<div class="field_data">Eksternal</div>
</div>
<div class="field">
<div class="field_title">Nama Pembicara</div>
<div class="field_data">Indra Gunawan</div>
</div>
<div class="field">
<div class="field_title">Keterangan</div>
<div class="field_data">tess</div>
</div>
<div class="field">
<div class="field_title">PIC Management</div>
<div class="field_data">Rainaldy</div>
</div>
<div class="field">
<div class="field_title">No HP PIC</div>
<div class="field_data">08112223456</div>
</div>
<div class="hidden_field">
<div class="field_title">-</div>
<div class="field_data">-</div>
</div>
<div class="field">
<div class="field_title">PIC Agency</div>
<div class="field_data">Imam Hidayat</div>
</div>
<div class="field">
<div class="field_title">No HP PIC</div>
<div class="field_data">08112223456</div>
</div>
</div>
<div id="comitment_plan" class='subcontent_area'>
<div class="subcontent_title">
Komitment/Plan
</div>
<div class="field">
<div class="field_title">Total Peserta BOP</div>
<div class="field_data">50</div>
</div>
<div class="field">
<div class="field_title">Total Agent Code</div>
<div class="field_data">30</div>
</div>
<div class="field">
<div class="field_title">Total NR</div>
<div class="field_data">25</div>
</div>
</div>
</div>
<div id="signature">
<div id="place_sign">Kota, <?php date_default_timezone_set('Asia/Jakarta'); echo date('d M Y');?>
</div>
<div id="sign_area">
<div class="sign">
<div>Proposed By</div>
<div class="person">$username</div>
</div>
<div class="hidden_sign"></div>
<div class="sign">
<div>Approved By</div>
<div class="person">()</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML;
return Yii::$app->html2pdf->convert($html)->saveAs('output.pdf');
}
.field is the class which contains the box.
Anyone has ever got this issue?
Thanks for your help.

how to fix this grid system issue in bootstrap

I have an in img in boostrap and i want it to show in right and to show 4 objects in the left in two rows each one has two objects which is 4 columns from the grid
My HTML
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product first wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" >
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Energy</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="banner">
<img src="http://placehold.it/300x450">
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
</div> <!-- end of row-->
MY CSS
.product{ overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;}
.product p {position: absolute; top: 10%; left:200%; color: white;
z-index: 2000; font-size: 20px; opacity:0; transition:all 0.5s;}
.product h6 {position: absolute; top: 40%; left:-200%; color: white;
z-index: 3000; font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px;
transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); }
and this is the result that shows up
http://i.imgur.com/2PhECdx.jpg
I have modified your code to make two columns and the first column is containing two rows with two columns.
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
</div>
</div>
Check this:
http://jsfiddle.net/h68hzfnc/