photos slider by html and javascript - javascript

I want to make html photo slider which have10 images appears and right & left button I want to make the button show the next and previous images I have the code below:
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div id="show" style="height: 500px"></div>
</div>
<div class="col-sm-1"></div>
<div style="min-height: 100px;"></div>
<div style="min-height: 300px;"></div>
<div class="col-sm-12" style="width: 100%; display: inline-block">
<div class="col-sm-1" style="padding:6px;height: 60px;">
<span style="margin-top:20px" class="glyphicon glyphicon-chevron-left btn btn-default"></span>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px; ">
<img id="image_1" src="img/002.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_2" src="img/003.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_3" src="img/004.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_4" src="img/005.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_5" src="img/006.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_6" src="img/007.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_7" src="img/008.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_8" src="img/009.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_9" src="img/010.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 90px;">
<img id="image_10" src="img/011.jpg" width="90" height="90"/>
</div>
<div class="col-sm-1" style="padding:1px;height: 60px;">
<span style="margin-top:25px;margin-right: 43px"
class="glyphicon glyphicon-chevron-right btn btn-default"></span>
</div>
<script type="text/javascript">
$(function () {
$('#image_1').click(function () {
$('#show').css('background-image', 'url(img/002.jpg)');
});
$('#image_2').click(function () {
$('#show').css('background-image', 'url(img/003.jpg)');
});
$('#image_3').click(function () {
$('#show').css('background-image', 'url(img/004.jpg)');
});
$('#image_4').click(function () {
$('#show').css('background-image', 'url(img/005.jpg)');
});
$('#image_5').click(function () {
$('#show').css('background-image', 'url(img/006.jpg)');
});
$('#image_6').click(function () {
$('#show').css('background-image', 'url(img/007.jpg)');
});
$('#image_7').click(function () {
$('#show').css('background-image', 'url(img/008.jpg)');
});
$('#image_8').click(function () {
$('#show').css('background-image', 'url(img/009.jpg)');
});
$('#image_9').click(function () {
$('#show').css('background-image', 'url(img/010.jpg)');
});
$('#image_10').click(function () {
$('#show').css('background-image', 'url(img/011.jpg)');
});
});
</script>


As I seee you use bootstrap classes. So you can try to use boostrap standard carousel
You will need to put your images in this block like this
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img id="image_6" src="img/007.jpg" width="90" height="90"/>
<div class="carousel-caption"><!--probably you will need to remove caption if you dont need it -->
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
</div>
</div>
...
</div>

Related

How to animate stroke to draw in JQuery from 0 to 100% when I hover over canvas

I am trying to animate the strokes that link my div's together but I would like to animate them from 0 to 100% when element is hovered over, would anyone have a solution?
So I am trying to animate the line so they draw from a point A to completion in point Z. I hope you can understand better with the code.
here is the website : https://willowy-rolypoly-66ca67.netlify.app/
<!-- language: lang-html -->
<div>
<div id="content">
<div id="div1" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_08.png" data-imgid="article08"
data-line="lineArticle08" data-scrollable="true" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div2" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_02.png" data-imgid="article02"
data-line="lineArticle02" data-scrollable="true" data-border="true">
</a>
</div>
<div id="div3" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_03.png" data-imgid="article03"
data-line="lineArticle03" data-scrollable="true" data-border="true">
<img src="./img/lotus.png" alt="">
</a>
</div>
<div id="div4" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_09.png" data-imgid="article09"
data-line="lineArticle09" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div5" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_10.png" data-imgid="article10"
data-line="lineArticle10" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div6" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_01.png" data-imgid="article01"
data-line="lineArticle01" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
</div>
<div class=" line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
<div class="line" id="line4"></div>
<div class="line" id="line5"></div>
<div class="line" id="line6"></div>
<div class="line" id="line7"></div>
</div>
<!-- language: lang-js -->
function loop() {
adjustLine($('#div1'), $('.canvas-box'), $('#line1'));
adjustLine($('#div2'), $('.canvas-box'), $('#line2'));
adjustLine($('#div3'), $('.canvas-box'), $('#line3'));
adjustLine($('#div4'), $('.canvas-box'), $('#line4'));
adjustLine($('#div5'), $('.canvas-box'), $('#line5'));
adjustLine($('#div6'), $('.canvas-box'), $('#line6'));
function adjustLine(from, to, line) {
if (from.length === 0 || to.length === 0 || line.length === 0) {
return;
}

html2canvas some is working some no

I have a problem,and I don`t understand.. absolute..
So I tried to use html2canvas.js. I want to render html to img. The content is in modal. Till here no any problems.
When I try to render that area what I want the toDataUrl() is empty.
But when I try to render a simple button,its working!
Both of is in a Modal. My code:
<div class="modal-body ">
<div class="print" id="printDiv">
<div class="rows nopm">
<div class="full">
<div class="head">
Make & Model
</div>
<div class="data">
{{$data['make']}} {{$data['model']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/age.png')}}"> Age
</div>
<div class="data">
{{Carbon\Carbon::parse($data['age'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/enginesize.png')}}"> Engine Size
</div>
<div class="data">
{{$data['eng_size']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/vrt.png')}}"> VRT
</div>
<div class="data">
{{Carbon\Carbon::parse($data['vrt_date'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/power.png')}}"> Power
</div>
<div class="data">
{{$data['eng_hp']}}PS ({{$data['eng_kw']}}KW)
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/roadlicence.png')}}" > Road tax
</div>
<div class="data">
{{$data['vrt_price']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/fuel.png')}}" > Fuel
</div>
<div class="data">
{{$data['fuel']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/mileage.png')}}" > Mileage
</div>
<div class="data">
{{$data['mileage']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/transmission.png')}}"> Transmission
</div>
<div class="data">
{{$data['trans']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="quatrohead">
Extras
</div>
<div class="quatro">
#foreach($data_extra as $extra)
#if ($loop->last)
{{$extra}}
#else
{{$extra}},
#endif
#endforeach
</div>
<div class="quatrohead">
Price
</div>
<div class="quatroless">
€{{$data['price']}}
</div>
</div>
</div>
</div>
<div id="targetCanvas">
<img class="imageCanvas" src="">
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-default" id="print">Print</button>
</div>
</div>
</div>
</div>
<script>
$('#printModal').on('shown.bs.modal', function (e) {
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
})

Place your script in
$(window).load(function (){
//Your script here
})
Or you could try with
setTimeout(function (){
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
},1000)

what is the name of the jquery pluigin used in this code

I found this code on a website.
It has tabs and images, once I clicked on the table it shows all images associated with this table.
Can anyone help me to find the name of the plugin used in this code?
And why it is not working successfully?
This is all the scripts on the page:
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Bootstrap JS form CDN -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- jQuery sticky menu -->
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<!-- jQuery easing -->
<script src="js/jquery.easing.1.3.min.js"></script>
<!-- Main Script -->
<script src="js/main.js"></script>
<!-- Slider -->
<script type="text/javascript" src="js/bxslider.min.js"></script> <script type="text/javascript" src="js/script.slider.js"></script>
<div class="row">
<div role="tabpanel">
<ul class="product-tab" role="tablist" style="margin-top: 10px; margin-bottom: 0px;" >
<li role="presentation" class="active">New Products</li>
<li role="presentation">Best Seller </li>
<li role="presentation">Must Have</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/S/1/S1/42/S1-42-alu-silver-sport-white-grid?wid=332&hei=392&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1472247758975" width="100%" height="200px" style="padding:0px 5px" alt="Slide">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/a/pp/apple/tv/apple-tv-hero-select-201510?wid=538&hei=535&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=vWwkV0" width="100%" height="200px" style="padding:0px 5px" alt="Slide">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/Music/Bose/bsm51_1.jpg" width="100%" height="200px" style="padding:0px 5px" alt="Slide">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/Accessories/laut/la71_1.jpg" width="100%" height="200px" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<div class="submit-review">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="http://cdn.bit68.com/tradeline/media/product_images/iPhone_6s_Space_Gray.jpg" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGWpLZhKGrzAHe2i2xG48uTO99bARgaLym8Q-HtymrFsuNfufoSw" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/Music/beats/bm44_1.jpg" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/Accessories/ozaki/oc6_1.jpg" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
</div>
<div role="Offers" class="tab-pane fade" id="Offers">
<div class="submit-review">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="img/image_01.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px" >
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="img/image_02.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/image_03.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/image_04.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
</div>
<div role="Must" class="tab-pane fade" id="Must">
<div class="submit-review">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="img/image_01.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="img/image_02.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/image_03.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/image_04.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The answer is in your question. You can see the scripts that are imported at the beginning of the code
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Bootstrap JS form CDN -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- jQuery sticky menu -->
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<!-- jQuery easing -->
<script src="js/jquery.easing.1.3.min.js"></script>
<!-- Main Script -->
<script src="js/main.js"></script>
<!-- Slider -->
<script type="text/javascript" src="js/bxslider.min.js"></script> <script type="text/javascript" src="js/script.slider.js"></script>
It can be owl.carousel + jquery.easing + bxslider
Google those library and see if it is what you want. They may also have added some custom Javascript (Certainly in main.js)

AngularJs:-how to dynamically push images into div and upload it to server in AngularJs

I am trying to implement a Crm kind of application..I have implemented a small feature in which I can select a div from various options. I have given a button to push the image in the div and also ng-style to set the properties.
The problem is I have used ng-model to push the image in the div..Now because of this when I am trying to push images into a new div I am getting the same image over and over again.Can anyone please give the solution to this
The issue is how do I control the image and the parameters which are given by the user and simultaneously display the same thing in the UI.
The below is my code.. cms.html:-
<div id="picture_container" style="display:none">
<div>Display Picture 1:
<input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required="">
<i ng-show="myForm.file.$error.required">*required</i>
</div>
<div>Display Picture 2:
<input type="file" ngf-select="" ng-model="picFile1" name="file" ngf-accept="'image/*'" required="">
<i ng-show="myForm.file.$error.required">*required</i>
</div>
<div>Display Picture 3:
<input type="file" ngf-select="" ng-model="picFile2" name="file" ngf-accept="'image/*'" required="">
<i ng-show="myForm.file.$error.required">*required</i>
</div>
</div>
<div class="home-page container" id="admin-cont" style="margin-bottom: 50px;padding-top: 20px;">
<div ng-repeat="layout in selectedLayouts track by $index" class="" style="margin-bottom: 35px;position:relative;">
<div ng-if="picFile" class="internal" ng-style="{'color': myColor || '#000','left':myLeft || '50%','top':myTop || '50%',
'font-size':myFont || '14px'}" style="position:absolute;" contenteditable="true">{{myText}}</div>
<div ng-if="picFile" class="internal" ng-style="{'color': myColor || '#000','left':myLeft || '50%','top':myTop || '50%',
'font-size':myFont || '14px'}" style="position:absolute;padding-top:14px;" contenteditable="true">{{myText1}}</div>
<ng-include src="layout" class></ng-include>
</div>
</div>
<script type="text/ng-template" id="grid-12">
<div class="row" id="grid-121">
<div class="col-sm-12" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<!-- <img ngf-src="picFile" class="img img-responsive"> -->
<ng-repeat="imageSource in imageSources track by $index" />
<span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span>
</div>
</div>
</script>
<script type="text/ng-template" id="grid-8-4">
<div class="row">
<div class="col-sm-8" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile" class="img img-responsive">
</div>
<div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile1" class="img img-responsive">
<span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span>
</div>
</div>
</script>
<script type="text/ng-template" id="grid-6-6">
<div class="row">
<div class="col-sm-6" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile" class="img img-responsive">
</div>
<div class="col-sm-6" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile1" class="img img-responsive">
<span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span>
</div>
</div>
</script>
<script type="text/ng-template" id="grid-4-8">
<div class="row">
<div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile" class="img img-responsive">
</div>
<div class="col-sm-8" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile1" class="img img-responsive">
<span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span>
</div>
</div>
</script>
<script type="text/ng-template" id="grid-4-4-4">
<div class="row">
<div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile" class="img img-responsive">
</div>
<div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile1" class="img img-responsive">
</div>
<div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;">
<img ngf-src="picFile2" class="img img-responsive">
<span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span>
</div>
</div>
</script>
the below is my javascript code:-
$scope.items = ['grid-12', 'grid-6-6', 'grid-4-8', 'grid-8-4', 'grid-4-4-4'];
$scope.selectedLayouts = [];
$scope.open = function() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'layoutTemplateModal.html',
controller: $scope.LayoutModalCtrl,
size: 'lg',
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selectedLayouts.push(selectedItem);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
Please help me out..
Thanks

Although there isn't enough code shown to narrow down where selectedItem comes from in your modal controller , the following should help.
Use angular.copy() to prevent pushing the same object reference into array
Try changing:
$scope.selectedLayouts.push(selectedItem);
To:
$scope.selectedLayouts.push(angular.copy(selectedItem));

bootstrap layout row with different heights

i want to add bootstrap row with col-lg-3class. my div contains different heights.hope to add articles with different length texts.
my output is but designed expected output and here. code as follows
<div class="row">
<div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
<div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
<div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
<div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
Updated
values put as 1,2,3 etc comes from mysql database. so the height is equal to text row numbers. php code is follows
`
foreach ($value as $add) {
echo "<div class='col-md-3'><p>";
echo $add->item;
echo "</p></div>";
}
?>`

Perhaps, I ruin your original code. I change everywhere. I hope this helps you.
Add customized stylesheet inside tag head:
<style>
.col-md-3{padding:0px;} // default: 15px -> left and right.
</style>
Here's the code:
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
1
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
5
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
2
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #b56969;height: 70px;">
6
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
3
</div>
<div class="col-md-12" style="background-color: #daad86;height: 20px;">
7
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
4
</div>
<div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
8
</div>
</div>
</div>
</div>
Because I don't know what version of your bootstrap, I use v3.1.1 for clearfix ... you can customize this based on your version.

You are on right track. This will definitely work. You need to use col-md-3 like this :
<div class="row">
<div class="col-md-3">
<p>1</p>
<p>5</p>
</div>
<div class="col-md-3">
<p>2</p>
<p>6</p>
</div>
<div class="col-md-3">
<p>3</p>
<p>7</p>
</div>
<div class="col-md-3">
<p>4</p>
<p>8</p>
</div>
</div>

I think try this
<div class="row">
<div class="col-lg-5">
<div id="1" ></div>
<div id="5" ></div>
</div>
<div class="col-lg-5">
<div id="2" ></div>
<div id="6" ></div>
</div>
<div class="col-lg-5">
<div id="3" ></div>
<div id="7" ></div>
</div>
<div class="col-lg-5">
<div id="4" ></div>
<div id="8" ></div>
</div>
</div>
Hope this will help you..

You can first use columns with col-lg-3 and then place your blocks inside each one. That way you will get your desired result.
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
</div>
</div>
CSS:
.grid-row{
margin-left: -15px;
margin-right: -15px;
}
.left-block{
float: left;
width: 100%;
}
Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/
Hope that helps.

Categories