I want to create a asp.net website. I use a bootstrap template. I put the link of that here. https://shapebootstrap.net/demo/html/evento/index.html#event-carousel . I want to connect Event section to sqlserver and the pictures load from the database table. i test that with repeater and datalist control in asp.net but it does not work correctly and the style of template destroy.For example when I used the repeater the pictures load from database but all of them are in one column.
How can I do that? I create a new section like event section. but I want to connect it to sql server. I searched for it and understand that I should use 2 repeater like 2 for loop and use group by. For example the datatable that load from database has 12 rows. I should devide it for example into 4*3 and connect datatable to repeaters. I do not know how can I do it?
<section id="Prefer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<div id="Prefer-carousel" class="carousel slide" data-interval="false">
<h2 class="heading" style="text-align:right;">Prefer</h2>
<a class="even-control-left" href="#Prefer-carousel" data-slide="prev" ><i class="fa fa-angle-left" ></i></a>
<a class="even-control-right" href="#Prefer-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event1.jpg" alt="event-image">
<h4>Chester Bennington</h4>
<h5>Vocal</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event2.jpg" alt="event-image">
<h4>Mike Shinoda</h4>
<h5>vocals, rhythm guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event3.jpg" alt="event-image">
<h4>Rob Bourdon</h4>
<h5>drums</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event1.jpg" alt="event-image">
<h4>Chester Bennington</h4>
<h5>Vocal</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event2.jpg" alt="event-image">
<h4>Mike Shinoda</h4>
<h5>vocals, rhythm guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/event/event3.jpg" alt="event-image">
<h4>Rob Bourdon</h4>
<h5>drums</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="guitar">
<img class="img-responsive" src="images/guitar.png" alt="guitar" />
</div>
</div>
</div>
</section><!--/#Prefer-->
Related
How to create a grid of images using bootstrap?
Thats what i got when i try the next codes
<div class="row">
<div class="col">
<div class="thumbnail">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
</div>
</div>
</div>
Im still in the very first steps learning phase started with HTML CSS and bootstrap as it give us achievements to feel the process.
im expecting to get thumbnail of grids as the following image
try it like this...
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
Then when adding extra pics, put them in columns too.
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
It may then work even better if you add widths to those columns using col-* where * is any number between 1 and 12.
<div class="row">
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
i tried basic paginatio
i tried simple pagination code
enter code here dwd
enter code hereemphasized text
I am new in asp.net mvc. I want to add pagination on images that are static lets suppose i kept 20 images in folder and i want to fetch these images from folder and show into view in a sequence on click of pagination numbers .
I have code this in view.
<div class="col-md-9">
<div class="row products products-big">
<div class="col-lg-4 col-md-6">
<div class="product">
<div class="image"> <img src="~/img/Quran.png" alt="" class="img-fluid image1"></div>
<div class="text">
<h3 class="h5">Holy Quran<br />with translation </h3>
<p class="price">$143.00</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="product">
<div class="image"><img src="~/img/tasbi.png" alt="" class="img-fluid image1"></div>
<div class="text">
<h3 class="h5">Tasbi</h3>
<p class="price">
<del>$280</del> $143.00
</p>
</div>
</div>
</div>
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo