i have one image in a page which is inside of a thumbnail(using bootstrap 3) i want to center this image, but it goes to the left of the page. how can i center this thumbnail?
here's the code:
<div class="container">
<div class="row-fluid">
<div class="col-sm-12">
<div class="img-thumbnail">
<img class="img-responsive center-block" src="images/winning logo.png"
alt="...">
<div class="container">
<div class="caption">
<h5>Logo Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
to brian: it didn't work with my thumbnail inside a carousel. the width of the thumbnail extend(right and left) inside the carousel.
<div class="carousel-inner">
<div class="item active">
<div class="row text-center">
<div class="col-sm-12">
<a href="" class="thumbnail">
<img class="img-responsive center-block" src="images/winning
logo.png" alt="Slide">
<div class="carousel-caption">
<h4>CANYONLAND RENTALS</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. </p>
</div>
</a>
</div><!--END OF COL-SM-12-->
</div><!--END OF ROW-->
</div>
</div>
it resolved, need to change the word "thumbnail" to "img-thumbnail".
Related
I have a button that has been set as position:fixed to the right of the page.
When its clicked it should open the modal however it doesn't do anything when clicked.
If i remove the position:fixed it works fine and the modal shows however this is not what I want as it needs to be fixed to the side
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="https://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="height:80px;background-color:white;border-bottom:0px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="padding-top:0px;"><img height="75" alt="Brand" src="logo260x80-2.png"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse" style="border-top:0px;border-bottom:0px;">
<ul class="nav navbar-nav navbar-right" style="padding-top:20px;border-top:0px;border-bottom:0px;">
<li class="active">
Home
</li>
<li>
Contacts
</li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="background-image" style="background-image : url('headerbg3.jpg');"></div>
<div class="container">
<div class="row">
<div class="col-md-12" style="height:200px;"></div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#demo" type="button" style="position:fixed;right:0px;"
tab-index="1" id="showmodal" class="btn btn-lg btn-success">
<i class="fa fa-envelope fa-2x"></i>
</button>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Gallery</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A ttile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h3>A title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
<div class="col-md-4">
<a><img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png" class="img-responsive"></a>
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, </p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<a class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</body>
</html>
Above is the complete HTMl code of the page
The problem is that the button is hiding behind the section div and become unclickable. So to make the button appear before the section we apply z-index:1; style to the button and the code will look like:
<button data-toggle="modal" data-target="#demo" type="button" style="z-index:1;position:fixed;right:0px;" tab-index="1" id="showmodal" class="btn btn-lg btn-success">
or JSfiddle demo.
Note: Here you can read more about the z-index property.
is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mousehover it starts to cycle the carousel and on mouseout it pauses.
slider.html
<div id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp"
data-ride="carousel">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="tab-section">
<div class="user">
<ul class=" carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active wow slideInUp " data-wow-delay=".1s">
<a href="" class="transition-fast">
<span class="count">01</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=" wow slideInUp"
data-wow-delay=".2s">
<a href="" class="transition-fast">
<span class="count">02</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 wow slideInRight" data-wow-delay="1s">
<div class="carousel-inner wow slideInUp" data-wow-delay="2s" role="listbox">
<div class="item active">
<img src="assets/img/first-01.png" alt="">
</div>
<div class="item">
<img src="assets/img/first-02.png" alt="">
</div>
</div>
</div>
</div>
</div>
script.js
$('#carousel-example-generic').hover(function(){
$("#carousel-example-generic").carousel('cycle');
},function(){
$("#carousel-example-generic").carousel('pause');
});
First disable the default behaviour of the carousel to stop on hover by putting setting the data-pause to false
id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp" data-pause="false"
Use the following js to manage the hover behaviour
$('.carousel').carousel({
interval: 2000
})
$('.carousel').carousel('pause') ;
$('.carousel').hover(function(){
$('.carousel').carousel('cycle') ;
}) ;
$('.carousel').mouseleave(function(){
$('.carousel').carousel('pause') ;
});
I'm trying to make a table with divs but it won't show properly. This is what I'm getting: the second cell isn't aligned with the first one. I tried everything but I just couldn't make it work.
Here's my code:
<div style="display: table; width:100%">
<div style="display: table-cell;">
<img src="" style="width:400px;">
</div>
<div style="display: table-cell;">
Lorem ipsum dolor
</div>
</div>
<div style="display: table; width:100%">
<div style="display: table-cell;">
<img src="" style="width:400px;">
</div>
<div style="display: table-cell; vertical-align: top;">
Lorem ipsum dolor
</div>
</div>
In second div use "vertical-align: top;" property.
I'm trying to use the Bootstrap affix to create two "sticky" blocks side by side on top in the content area but they do not behave as expected. They always either overlap each other and/or the content or does not fill their parent.
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<text id="menu"></text>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-9 col-md-push-9 col-sm-push-9 col-xs-push-9" id="sticky2" data-spy="affix">
<text id="right"></text>
</div>
<div class="col-lg-7 col-md-7 col-sm-9 col-xs-9" id="sticky1" data-spy="affix">
<h1><span class="hidden-lg hidden-md hidden-sm">XS</span><span class="hidden-lg hidden-md hidden-xs">SM</span><span class="hidden-lg hidden-sm hidden-xs">MD</span><span class="hidden-md hidden-sm hidden-xs">LG</span></h1>
<text id="top"></text>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="row contentRow" id="contentRow">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: yellow;">
<text id="content"></text>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Have a look at this fiddle: http://jsfiddle.net/halvorsen/1zv6gqwu/42/
Any suggestion on how to solve this?
Do I have to set the size on the "sticky" blocks using JavaScript?
I,m trying to make a responsive website using bootstrap3 that is 3-column in large screens and 2-column in medium:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
http://www.bootply.com/yfJF1flD0V
but this code not working properly and on medium size, sidebar2 goes in a new row and i want sidebar2 goes below sidebar1 directly. how can i do that?
You've got to duplicate some of your content and use hidden-lg and visible-lg.
DEMO ON BOOTPLY
<div class="container">
<div class="row">
<!-- on md only -->
<div class="col-md-4 hidden-lg">
<div class="row">
<div class="col-md-12 grey1">
Sidebar 1 md - Lorem ipsum dolor sit amet...
</div>
<div class="col-md-12 grey2">
Sidebar 2 md - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
<!-- on lg only -->
<div class="col-lg-2 visible-lg">
Sidebar 1 lg - Lorem ipsum dolor sit amet...
</div>
<div class="col-lg-2 col-lg-push-8 visible-lg">
Sidebar 2 lg - Lorem ipsum dolor sit amet...
</div>
<!-- on all -->
<div class="col-md-8 col-lg-pull-2">
Main all - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
Because of the requirement to stack your sidebars on md screens with main content to their right, you've got to put the sidebars in a containing column. But that containing column then makes it so you can't bookend your sidebars around that same main content in lg screens. Hence the need to use visible and hidden. I always feel like they're a bit clunky, but otherwise I think you won't get exactly what you want...
I do it with jQuery.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
and jQuery:
function mediumResponsive() {
// Reset everything
$( '#main>div' ).removeClass('col-md-8');
$("#sidebar1").next().andSelf().unwrap();
$( "#sidebar2" ).insertAfter( $( "#main" ) );
if ($('#is-md').is(":visible")) {
// Do medium responsive
$( "#sidebar2" ).insertAfter( $( "#sidbar1" ) );
$("#sidebar1").next().andSelf().wrapAll('<div class="col-md-4"><div class="container-fluid"');
$( '#main>div' ).addClass('col-md-8');
};
};
$(document).ready(mediumResponsive);
$(window).bind( "resize", mediumResponsive );
and it works.
Please tell me your comments.