am trying to have a carousel where each slide is linked to a different page.
My code for the base carousel is
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="about.html">
<img src="img//tshirts/large/slide1.png" alt="" >
</div>
<div class="item">
<a href="tshirts.html">
<img src="img//tshirts/large/slide2.png" alt="">
</div>
<div class="item">
<a href="sublimation.html">
<img src="img//tshirts/large/slide3.png" alt="">
</div>
<div class="item">
<a href="sweatshirts.html">
<img src="img//tshirts/large/slide4.png" alt="">
</div>
</div>
This works perfect and shows all 4 slides one after another then back to beginning
So I wanted to add the hyperlinks as follows
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="about.html">
<img src="img//tshirts/large/slide1.png" alt="" >
</div>
<div class="item">
<a href="tshirts.html">
<img src="img//tshirts/large/slide2.png" alt="">
</div>
<div class="item">
<a href="sublimation.html">
<img src="img//tshirts/large/slide3.png" alt="">
</div>
<div class="item">
<a href="sweatshirts.html">
<img src="img//tshirts/large/slide4.png" alt="">
</div>
</div>
Now when I run the second code the first slide is perfect and when clicked goes to the page but as soon as it slides to the next slide no slide is shown and none are clickable and it doesn't go back to the first slide
Please close hyper link tag, Like
<div class="item active">
<a href="about.html">
<img src="img//tshirts/large/slide1.png" alt="" >
</a>
</div>
Related
I have a pricing comparison section of a Bootstrap 5 website, one column displays the images perfectly (without captions), however whenever I add a paragraph tag for the caption, the images stack on top of one another instead of staying inline in a row.
Here is the code for images without captions:
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="150">
<div class="box">
<h3>Basic</h3>
<h4><sup>£</sup>4.50<span> / month</span></h4>
<ul>
<li><i class="bi bi-check-circle"></i>Web and mobile versions of Office apps only</li>
<li><i class="bi bi-check-circle"></i>Chat, call, meet up to 300 attendees</li>
<li><i class="bi bi-check-circle"></i>1 TB of cloud storage per user</li>
<li><i class="bi bi-check-circle"></i>Business-class email</li>
<li><i class="bi bi-check-circle"></i>Standard security</li>
<li><i class="bi bi-check-circle"></i>Anytime phone and web support</li>
</ul>
<p>Web and mobile apps and services:</p>
<img src="assets/img/Word_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Excel_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid">
<img src="assets/img/PowerPoint_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Microsoft_Teams_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Exchange_64x64.png" alt="" class="img-fluid">
<img src="assets/img/OneDrive_64x64.png" alt="" class="img-fluid">
<img src="assets/img/SharePoint_64x64.png" alt="" class="img-fluid">
<div class="btn-wrap">
Buy Now
</div>
</div>
</div>
Here is the code for images with captions:
<div class="col-lg-4 col-md-6 mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="150">
<div class="box featured">
<h3>Premium</h3>
<h4><sup>£</sup>16.60<span> / month</span></h4>
<b><p>Everything in Business Standard, plus:</p></b>
<ul>
<li><i class="bi bi-check-circle white"></i>Advanced security
<li><i class="bi bi-check-circle white"></i>Access and data control
<li><i class="bi bi-check-circle white"></i>Cyberthreat protection</li>
<li><i class="bi bi-check-circle white"></i>Mobile device management</li>
</ul>
<p>Desktop, web, and mobile apps and services:</p>
<img src="assets/img/Excel_64x64.png" alt="" class="img-fluid"><p>Excel</p>
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid"><p>Outlook</p>
<img src="assets/img/PowerPoint_64x64.png" alt="" class="img-fluid"><p>PowerPoint</p>
<img src="assets/img/Microsoft_Teams_64x64.png" alt="" class="img-fluid"><p>Teams</p>
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid"><p>Outlook</p>
<img src="assets/img/Exchange_64x64.png" alt="" class="img-fluid"><p>Exchange</p>
<img src="assets/img/OneDrive_64x64.png" alt="" class="img-fluid"><p>OneDrive</p>
<img src="assets/img/SharePoint_64x64.png" alt="" class="img-fluid"><p>SharePoint</p>
<img src="assets/img/Access_64x64.png" alt="" class="img-fluid"><p>Access</p>
<img src="assets/img/Publisher_64x64.png" alt="" class="img-fluid"><p>Publisher</p>
<div class="btn-wrap">
Buy Now
</div>
</div>
</div>
What do I need to change to keep the icons inline?
Try wrapping your <img> and the <p> inside a <div>. Since <p> is a block-level element, meaning that any element after <p> will automatically be added to a new line.
Here's my example
<div>
<img/>
<span>your text here</span>
</div>
Also note that I'm changing <p> with <span>
Update code
To centre all the content
<div class="d-flex flex-wrap align-items-center justify-content-center">
...
</div>
Try to use the flex property of bootstrap
<div class="d-flex flex-column align-items-center justify-content-center">
<img/>
<p>your text here</p>
</div>
for more details check out the bootstrap doc[https://getbootstrap.com/docs/5.0/utilities/flex/]
and You can wrap all the image div with flex-wrap
<div class="d-flex flex-wrap">
...
</div>
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
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-->
When using a "Link Item", begun with <div class="ui divided link items">, in Semantic UI (as per the manual: http://semantic-ui.com/views/item.html), where should I specify the URL of the page I would like the item to link to?
I tried wrapping the whole <div class="item"> within <a>, but doing so breaks the formatting of the item such that the content appears below the picture.
You can sub your div.item with a.item like in this fiddle or HTML below:
<div class="ui divided link items">
<a class="item" href="http://www.google.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/stevie.jpg">
</div>
<div class="content">
<div class="header">Google</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://www.yahoo.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/veronika.jpg">
</div>
<div class="content">
<div class="header">Yahoo!</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://duckduckgo.com/" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/jenny.jpg">
</div>
<div class="content">
<div class="header">DuckDuckGo</div>
<div class="description">
<p></p>
</div>
</div>
</a>
</div>
I want to place an image at the bottom right corner of a text and that text should take col span of 5. I have the following code and it creates a scroll bar vertically on the page.
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="col-sm-5 col-md-5">
<div class="Mymsg">Welcome to Era</div>
<div class="msg">here you are!</div>
</div>
<div class="media">
<a href="#">
<img class="media-object" src="images/myIamge.png"/>
</a>
</div>
</div>
</div>
Please add two more classes col-sm-7 col-md-7 for the media:
<div class="media col-sm-7 col-md-7">
<a href="#">
<img class="media-object" src="images/myIamge.png"/>
</a>
</div>