I'm trying to customize the bootstrap gallery full screen starting from this tutorial bootstrap gallery full screen
the code:
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
as you can see, the class that contains the button "View Gallery"
is positioned within the classes "item" and "fill"
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
For graphic reasons, I have to place the button in the fixed position at the bottom right of the screen, but must remain within the original classes.
I have tried in various ways, but I can not get it on the visualization for mobile devices.
for example, I'm trying to optimize viewing on iphone5 (640 x 1136) #media (max-width: 768px) using this class applied to the button:
.gallery-button {
text-align:right;
background-color: transparent;
position: fixed;
max-width: 100%;
padding: 0 20px;
top: 350px; left:150px;
}
In portrait mode would be fine, but in lanscape the button disappears.
ok, how can I solve the problem for all types of display?
Thanks
To fix for all scenarios, you should specify the position from bottom and right if you want it in the bottom right.
.gallery-button {
position: fixed;
bottom: 5px;
right: 5px;
}
That should fix your problem for all screen sizes.
Related
I've got problem with self-created sidebar in admin panel. It works fine on desktop, but I want that in mobile it should change position to top.
At this moment it looks like this:
LINK
<div class="col-3" id="sticky-sidebar">
<div class="sticky-top">
<div class="card-body" align="center">
<h4>Admin Panel</h4>
<div class="nav flex-column" align="center">
<div class="sidebar-menu-header">
<h5>Site</h5>
</div>
<button class="btn btn-outline-dark nav-link btn-admin active">Statystyki cmentarza</button>
<button class="btn btn-outline-light nav-link btn-admin dropdown-btn" data-toggle="dropdown">Osoby pochowane</button>
<div class="dropdown-container">
<a class="nav-link" href="#">Ewidencja osób</a>
<a class="nav-link" href="#">Dodaj zmarłego</a>
</div>
</div>
</div>
</div>
</div>
I use class - sticky-top to get it on site. I know that if I use something like this:
#media(max-width: 650px){
#sticky-sidebar{display: none;}
}
It should hide it. Eitherway I wanted to move it when it's on small screen to top of the site under the navbar.
It works and hide it, you can create a new navbar who displays only under 650px
#my-new-navbar {
display: block;
}
#media screen and (min-width: 650px){
#my-new-navbar{display: none;}
}
or you can use col-md-3, by default your navbar takes 100% width.
<div class="col-md-3" id="sticky-sidebar">
...
</div>
I'm using Bootstrap's sample 'carousel.css and html' Using an image size 1500x500
How can I maintain the height of the image and, without distorting the image, crop an equal amount off of each side if the browser window becomes smaller than the image, leaving the height at 500px?
This is the related CSS that Bootstrap provides and I'm using.
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
And here's the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/1600x500.png" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Text text text.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
Thank you in advance. I've scoured this forum as well as others and can't seem to crack this. As simple as it sounds.
I have been trying for hours trying different examples I have found, and none seem to work.
What I want to do (without the custom JS): http://jsfiddle.net/paulalexandru/Z2Lu5/
However, I can't get it to work within Bootstrap. I am specifically using React-Bootstrap (I have changed the below code to normal HTML for those unfamiliar with React/React-Bootstrap), but I don't believe that to be the problem. I have a setup along the lines of:
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar"
<my sidebar elements>
</div>
<div class="col-md-10">
<some random empty div (that will fill in the future)>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<my table containing search results from the server>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
However, no matter how hard I try
.search {
position: fixed;
bottom: 0;
width: 100%;
}
You will also notice stuff to try and make the search results accordion, but that's useless to me until I can get this box to stay at the bottom.
My guess is that the Rows/Columns of Bootstrap are causing some issues. I can't move the search box out of the grid and to the bottom (which does work) because it then also covers the sidebar, and I am using the grid system to keep the search box dynamically sized/placed.
Also, I tried this but it didn't seem to work: Making expandable fixed footer in Bootstrap 3?
The solution is position: fixed (you can see the other example using it as well). It should work no matter what framework you are using.
body
{
margin: 0;
padding: 0;
}
.search
{
background: rgba(255,0,0,0.5);
bottom: 0;
position: fixed;
width: 100%;
}
#media only screen and (min-width: 550px)
{
.search
{
left: 50%;
margin-left: -250px;
width: 500px;
}
}
#media only screen and (min-width: 850px)
{
.search
{
margin-left: -400px;
width: 800px
}
}
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar">
<div>my sidebar elements</div>
</div>
<div class="col-md-10">
<div>some random empty div (that will fill in the future)</div>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<div>my table containing search results from the server</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle
Using the Bootstrap media feature, how can I place a badge in the lower right of the media block's image (so it's on top of the image)?
With such a markup :
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" />
<span class="badge badge-success pull-right">2</span>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
My content
</div>
</div>
You have your badge at the bottom right of the image, but under. If you want it to be a bit over the image, add this css :
.media img+span.badge {
position: relative;
top: -8px;
left: 8px;
}
See this Fiddle : http://jsfiddle.net/d7kXX/
But obviously you can place it wherever you want. If you want it entierly over, try this :
http://jsfiddle.net/6cME7/
FYI, If you resize it breaks the badge size. I guess it gives a general idea but i think it is not fully functionnal.
Hard to tell what you want exactly without having seen your code, but I gave it a shot anyway:
HTML
<div class="media">
<a class="pull-left relative" href="#">
<img class="media-object" src="http://placekitten.com/200/150" />
<span class="label label-warning bottom-right">Cute kitten</span>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet
</div>
</div>
CSS
.relative {
position: relative;
}
.label.bottom-right {
position: absolute;
right: 2px;
bottom: 2px;
}
I prefer using absolute positioning when thing have to be aligned relative to the bottom and/or right, as it is the easiest and most reliable method imo.
A demo: http://www.bootply.com/suRioyheqL
I have implemented the carousel on my webpage as follows
<div class="container-fluid">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/public/images/Lighthouse.jpg">
</div>
<div class="item">
<img src="/public/images/Lighthouse.jpg">
</div>
<div class="item">
<img src="/public/images/Lighthouse.jpg">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!--End of Carousel-->
I would like it to remain responsive, which at present it is, the picture adjusts as the screen gets smaller. However the carousel fills the whole page (Width) and I would like to make it smaller and have it sit in the center of the page. I have given a width for .carousel but this seems to effect the responsiveness.
Does anyone know how to customize this plugin or have done this in the past
Any help appreciated
Thanks
media Query solves this issue as I had given the carousel a width
#media (max-width:600px) {
.carousel {
width: 100%;
}
}
where and how to add this #media (max-width:600px) {
.carousel {
width: 100%;
}
} instruction