<div class="carousel-inner">
<div class="item active" >
<div class="carousel-caption">
<h3>Test</h3>
<p>
</p>
</div>
</div>
</div>
Here is my code.
Carousel slider worked correctly
and element was showed when i inspect it
but a images can't click in mobile and ipad version
can fix this
I've added onlick function into div elements
<div class="carousel-inner">
<div class="item active" onclick="window.open('test');" style="cursor: pointer;" >
<img src="/site_media/test_image.jpg" alt="test test" />
<div class="carousel-caption">
<h3>Test</h3>
<p></p>
</div>
</div>
Related
I am trying to make simple carousel using bootstrap and im having a problem with image sizes, i want it to be full screen images. does that mean that i have to add media queries? if yes how can I do that?
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="imagehere.png">
</div>
<div class="item">
<img src="imagehere.png">
</div>
<div class="item">
<img src="imagehere.png">
</div>
</div>
</div>
No,you don't have to add media queries. Set image width to 100%. Give each image a class of img-fluid and set your body margin to 0
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-fluid" src="https://images.unsplash.com/photo-1472722886393-f2f51e9deec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
width="100%" height="100%">
</div>
<div class="item">
<img class="img-fluid" src="https://images.unsplash.com/photo-1531682607150-08b2476a545a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=742&q=80"
width="100%" height="100%">
</div>
<div class="item">
<img class="img-fluid" src="https://images.unsplash.com/photo-1498595664159-2df8dee7e63c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
width="100%" height="100%">
</div>
</div>
I'm currently working on my first ever website, this is using the twitter-bootstrap 4 framework. Everything was going swimmingly, until I have seemingly encountered the following issue.
I currently have this layout for my website:
Current Layout
When in fact I would like:
Desired Layout
I have attempted a plethora of solutions that I have found via browsing stack-overflow, such as nesting columns. None of it seems to work, I'm sure it is simply due to my inexperience, but I'm stumped as to how to get my desired appearance.
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Welcome to my Website</h2>
</div>
<div class="col-sm-3">
<div id="myCarousel" class="carousel slide pull-right" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><img src="img/Christina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="1"><img src="img/NickyAndChristina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="2"><img src="img/Nicky.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="3"><img src="img/Meme.JPG" alt="..."></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/Christina.JPG" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/NickyAndChristina.JPG" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Nicky.JPG" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Meme.JPG" alt="Fourth slide">
</div>
</div>
</div>
</div>
</div>
</div> <!-- End of Carousel -->
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Test Header</h2>
</div>
</div>
</div>
As seen above, I am trying to have a photo gallery slider to the right of my website and the formatting I have attached above, it simply will not work. Can someone please give me some guidance? I have been thoroughly enjoying working on this website, but I cannot progress until I have resolved this as it will plague my mind.
#nedge
https://jsfiddle.net/saurabhanand/4f0pztcu/2/
<div class="container">
<div class="row container-0">
<div class="col-sm-6">
<div class="row container-1">
<div class="col-sm-12">
<img class="rgt-side-img" src="https://via.placeholder.com/500x250">
</div>
</div>
<div class="row container-2">
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
</div>
</div>
<div class="col-sm-6">
<img class="rgt-side-img" src="https://via.placeholder.com/500">
</div>
</div>
</div>
I hope this one helps. You can replace img tag with your own contents.
I'm using bootstrap cards to build this layout on desktop:
So far so good, at this width everything is ok as well:
But from this width to desktop width the container is not filled:
The HTML to build the card with the images is:
<div class="card h-60">
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="imageban" src="img/crm.png" />
<span><b>CRM</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="img-responsive" src="img/img1.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content report">
<div class="col-md-12">
<img class="imageban" src="img/report.png" />
<span><b>Report</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="imageban" src="img/img4.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="img-responsive" src="img/formal_notices.png" />
<span><b>Formal Notices</b></span>
</div>
</div>
<div class="box-content text">
<a href="#">
Open the Formal <br>Notice Document <br>Library
</a>
</div>
</div>
</div>
</div>
And the CSS is only this line:
.row.box{
max-width: 345px;
}
I'm stuck in this, any help would be nice. Thanks.
You can remove the class .box and use the Bootstrap classes instead col-md-4 col-xs-12.
Please see the images below
I am using bootstrap thumbnails. When i reduce my screen size using chrome's inpscet element, i get thumbnails as in image1, on further reducing i see the "Go to Page" and "View Details" buttons disorient. When i further reduce the screen size, number of images in a row reduces and again the buttons are aligned properly as in image3.
Please help me to increase the minimum width for my thumbnails which will lead me from image1 to image3... that is prevent dis-orienting the button positions.
here is the code for page content
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Home</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<style>
.thumbnail{
// min-width: 240px;
}
</style>
<!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Recently added
</div>
<div class="panel-body">
<div class="row">
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<!-- </div>
<div class="row">-->
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Top courses
</div>
<div class="panel-body">
List top uploaded courses
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
Bootstrap detects the browser window size to do the adaptation. Because the inspector goes inside the browser window when docked it will break you css layout.
To solve this you can create a new css class with bigger min-width property.
.my-thumbnail { min-width: 300px !important;} and add this css class to your thumbnail html element. Add important to override existing min-width.
Remember you'll have to do different ones for each of the screen sizes. You'll probably have to play with the size of the cols where the thumbnails are inside too.
You reduce browser to some height and width through browser console. Bootstrap responsiveness works on media queries, wherein, they will be setting relative values to respective elements based on min-width and max-width for screen. So it's like if it is between a range of value, then the particular styles gets applied. To know exactly how good the responsiveness is you need to use mobile emulator present in chrome browser.
So for example, if you see below media query
#media (min-width: 767px){
//some styles for grid where width=600px
}
#media (min-width: 1200px){
//some styles for grid where width=900px
}
Then until 768px of screen width the width of grid will be 900px and once it drops down it will reduce to 600px.
Conclusion
Since the screen width will be fixed for different devices and won't be between any irregular values, you should test the responsiveness either with the real devices or with the browser emulator which is shown in above image
This is what I'm trying to do.
I want bootstrap carousel to have col-sm-8. and I want to put a table that shows top stories in col-sm-4.
And then below those two. I want to have three col-sm-4 that contains the list of categories.
Problem I'm having is carousel invades col-sm-4. It should end its space in col-sm-8 but it goes there any way. Also I'm not sure how to have col-sm-8 and col-sm-4 in the top section. and below col-sm-4 col-sm-4 col-sm-4. What I tried was put div around top section. and one div for below section. But this doesn't work. As I'm a noob, I would appreciate any kind of advice or help. Thank you.
<div>
<div class="col-sm-8">
<div class='carousel slide' id="myCarousel" style="width:1400px; margin:0 auto">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src = "http://i.imgur.com/SQ691ZO.jpg" />
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
<div class="item" id="slide2">
<img src = "http://i.imgur.com/SQ691ZO.jpg" />
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
<div class="item" id="slide3">
<img src = "http://i.imgur.com/SQ691ZO.jpg" />
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div>
</div>
<div class=col-sm-4>
hello you
</div>
</div>
<div>
<div class=col-sm-4>
category one
</div>
<div class=col-sm-4>
category two
</div>
<div class=col-sm-4>
category three
</div>
The bootstrap grid system
The bootstrap grid has a certain setup you should use. First you create a container, this can be either fixed with .container or fluid (from the left to the right side) .container-fluid.
Inside the container you can create .rows, to nest columns in it.
A basic setup for your needs could be:
<div class="container">
<div class="row">
<div class="col-xs-8">8 Columns</div>
<div class="col-xs-4">4 Columns</div>
</div>
<div class="row">
<div class="col-xs-4">3 Columns</div>
<div class="col-xs-4">3 Columns</div>
<div class="col-xs-4">3 Columns </div>
</div>
</div>
JSFIDDLE DEMO
You can read about it on bootstrap grid introduction.
Adopt grid system
If you adapt this to your code it could look like this:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class='carousel slide' id="myCarousel">
<!--slider content -->
</div>
</div>
<div class=col-sm-4>
hello you
</div>
</div>
<!--.row-->
<div class="row">
<div class=col-sm-4>
category one
</div>
<div class=col-sm-4>
category two
</div>
<div class=col-sm-4>
category three
</div>
</div>
</div>
<!--.container-->
JSFIDDLE DEMO 2
Slider width
To fix the slider, which gets too big, you have to remove style="width:1400px; margin:0 auto" from its div. Afterwards it should adjust its size automatically.