I am trying to resize image using Bootstrap. I have a sufficiently large logo, for large screens & resolutions. Apparently, the image should resize well in all resolutions (small & big resolutions).
I have used the Bootstrap’s .img-responsive class for making images responsive. As is evident, image shows fine in large resolutions, but the image should become small in smaller resolutions. The problem is that - image is not getting smaller in smaller resolutions.
Any help would be highly appreciated.
<BODY>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header col-xs-3 col-md-3">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="someimage.png">
</a>
</div>
<div class="col-xs-9 col-md-9">
<ul class="nav navbar-nav navbar-right">
<li><img class="img-responsive" src="A1.png"></li>
<li><img class="img-responsive" src="A2.png"></li>
</ul>
</div>
</div>
</nav>
</BODY>
I think the root of your problem is that you are expecting that the .img-responsive class will automatically make your images smaller for smaller screens, and this isn't exactly how it works.
It actually applies max-width: 100%; and height: auto; to the image, i.e. if it's a wide image it won't be wider than its parent. http://getbootstrap.com/css/#images
Hope this helps
With bootstrap 4 there are display utilities which can be used to render different images for different viewport,
e.g.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header col-xs-3 col-md-3">
<a class="navbar-brand" href="#">
<img class="d-none d-sm-block" src="someimage.png"><!-- Image to show on screens from small to extra large -->
<img class="d-sm-none" src="someimagesmaller.png"><!-- Image to show on extra small screen (mobile portrait) -->
</a>
</div>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header col-xs-3 col-md-3">
<a class="navbar-brand" href="#">
<img class="hidden-xs" src="someimage.png">
<img class="visible-xs" src="someimagesmaller.png">
</a>
</div>
<div class="col-xs-9 col-md-9">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img class="hidden-xs" src="A1.png">
<img class="visible-xs" src="A1smaller.png"></a></li>
<li><img class="img-responsive" src="A2.png"> </li>
</ul>
</div>
</div>
</nav> `
In Bootstrap version 4 class ".img-responsive" has been changed to ".img-fluid".
use the class="img-responsive" and it will shrink the image when you open in mobile or other device using bootstrap css. but for u its not working can u check the correct links you added in the headers.
Related
i want to add image logo in nav-bar using bootstrap 5
<a class="navbar-brand" href="#">
<img src="demo-logo.png" alt="logo" >demo-logo
</a>
i'm using this code by many way but, it didn't working
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Check This
I'm new so I hope you can bare with me and help a newbie out.
I'm trying to apply the lightbox2 in a carousel. I want to be able to click on an image in my carousel and have that popping up in large in a lightbox. I followed all the steps (https://lokeshdhakar.com/projects/lightbox2/) but to apply the lightbox, it gives the example of using it in a a tag, but my images are inside a img tag.
I don't understand how I'm going to make it work, I've tried for hours now and I'm starting to give up. I think I'm confusing myself more than necessary.. Heres my carousel code:
<section class="page-section" id="portfolio">
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-md-8">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="First slide"></div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Second slide"></div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/portfolio/display-bw.jpg" alt="Third slide"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Thanks for your help,
Cris
I was able to get a kinda hacky solution.
You could do it like this. Replace "Image" in quotations with your image, and replace "data-lightbox" in quotations with what you want
<img id="minecraft" src="Image">
I don't think this is a good way but it works perfectly on my site. Also, I don't know if it will work on a carousel because I am also new but you can try.
Hello I have seen similar questions been asked but could not find a tutorial on how to create a dynamic bootstrap carousel in ruby on rails. The admin of my site needs to be able to browse and upload images rather than having to change any code. I have tried a carrier wave approach but was unable to get it working.
Here is my current carousel which is hard coded.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('assets/banner2.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('assets/Banner3.png')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('assets/SaleHero1.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Obviously at the moment if you want to change the images to something else it has to be done through the code. Could some point me in the right direction to get this task completed. Thank you :)
Assuming you can figure out how to upload images using carrier wave, you'll need to use ERB in your views.
<% #images.each do |image| %>
<div class="carousel-item" style="background-image: <%= images.url %>)">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<% end %>
You'll need to create a mode like image.rb which would need to store the images uploaded URL assuming you'll use an AWS S3 bucket. Then you'll need your code to store the url of the images in an attribute like url
Then in your controller you'll need something like:
def index
#images = Image.all.limit(10) # or however many images you wanna use
end
this is my first post
just the site i needed cause im kinda new to all this
im trying to validate my page and there is 1 error that i dont know what to do with
Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
if i remove the div part
my page is not looking the same as it does with it and it works on all browsers right now with the errors
this is the piece of code that is making the error
<div class="picture_content margin-left">
<ul class="image_box_story2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slider1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</section>
any help on how to fix this would be apreciated alot
thanks for taking the time
btw i downloaded a bootstrap temp and the Original file has the same errors
The error is
<ul class="image_box_story2">
a ul is a list and can only have li children, not div, that list doesn't have any li children at all.
Perhaps you can change it to <div class="image_box_story2"> (and change (</ul> to </div>) that would make it valid, but whether it displays Ok depends on the css you have not shown.
OK I have accomplished this without bootstrap
<nav id="active">
<ul>
<li>Home</li>
<li>Ministries</li>
<li>Bylaws</li>
<li>About Us
<ul>
<li>History of RK</li>
<li>Mission Statement</li>
<li>Prayer Request</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
<div class="img"></div>
</nav>
I am wanting to convert the current site to bootstrap and I am unable to find exactly how to do this. The image basically is floating in the middle of the navigation, that way it will allow me to make the image slightly larger in height that the navbar. Currently this is how I have it, the image isn't floating in the center it is styled there. which isnt the way I want it.. again like the image to be bigger than the menu height wise.
<div class="span12">
<nav class="navbar nav-center navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav pull-right">
<li>About Us</li>
<li>Testimonies</li>
<li>Contact Us</li>
</ul>
<div class="navbar">
<img src="images/logo.png" width="115" height="135" alt=""/>
</div>
</div>
</nav>
</div>
****Ok quick edit... If you view this site. www.risenkings.com, if you notice that the logo image is floating in the middle of navbar. This is what I am trying to accomplish within bootstrap.
I would start by using just the standard navbar markup. Links will automatically float left, so your Home, Ministries and Bylaws can just be wrapped in a ul with 'nav navbar-nav' classes. For the remaining links, you'll want to wrap them in a separate ul adding the navbar-right class as well.
You can repurpose the navbar-brand class for your logo. Remembering that Bootstrap is a mobile first framework, you'll probably want to first style your logo to be on the left within the navbar for your "collapsed" menu style. I just sized your logo generally and adjusted the padding. You can tweak it how you like.
Once the menu is not collapsed (on viewports that are greater than 768px), you'll need to use a media query to position your navbar, and position and center your logo. Using position absolute on the wrapping navbar-brand with the right and left properties to 0, then setting the img inside to display block with margin auto is one way to do this. The demo shows the basic results.
DEMO
HTML:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcollapse">
<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" href="#"><img src="http://www.risenkings.com/images/logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
About Us
<ul class="dropdown-menu" role="menu">
<li>History</li>
<li>Mission</li>
<li>Requests</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
CSS:
.navbar-brand {
padding-top: 2px;
}
.navbar-brand>img {
width: 3em;
}
#media (min-width: 768px) {
.navbar {
margin-top: 4em;
}
.navbar-brand {
position: absolute;
top: -2em;
left: 0;
right: 0;
}
.navbar-brand>img {
width: 6em;
margin: 0 auto;
display: block;
}
}