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
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
As a relative newbee to Bootstrap I have been trying to code a menu with dropdowns. Code is listed below, but I find some issues:
The menu code was copied from GetBootstrap.com docs. Looked at other sites to see where the problem may be, tried alternatives but no luck.
bootstrap.min.css and bootstrap.bundle.min.js, both version 5, have been linked in to the code. Have tried these files directly on site and via links. Also tried popper.js plus bootstrap.min.js; same result.
Direct links do work, but the dropdown part does not. Clicking on the dropdown item produces nothing. It would be great if it would show on hover and stay in place so that sub-items can be clicked.
The menu should be on the righthand side of the screen; looking at answers, ms-auto should do this. It does not.
When the screen is collapsed to tablet or phone size, the menu goes to the expected compressed symbol, but does not function at all; it will not show anything when clicked.
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" dropdown>
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
dropdown should be a class .. not an attribute:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Everything works as expected
Using CDN to integrate Bootstrap 5.0.0-beta3 resources, following should work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
I hope, this will help you out!
Feel free to Upvote the answer
Thank you both to Manifest Man and Zim. I was using an earlier version of bootstrap 5 and when the latest version of bootstrap.min.css and bootstrap.bundle.min.js were used it started to work.
In addition, yes, dropdown is a class, not an attribute.
I'm working in Laravel 5.5 which is bundled with Bootstrap and I have my main JS file running appropriately (i.e. laravel mix compiling with all the all the js files loaded with it appropriately). However, bootstrap 3.3.7's carousel is not working at all. The transitions (slide actions) don't work and the buttons dont work at all. here's my code below
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('./animations');
window.Vue = require('vue');
// *
// * Next, we will create a fresh Vue application instance and attach it to
// * the page. Then, you may begin adding components to this application
// * or customize the JavaScript scaffolding to fit your unique needs.
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '.content'
});
<script type="text/javascript" src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/main.css') }}" rel="stylesheet"> . .. ...
<div class="container-fluid content">
<div class="carousel slide" id="features">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#features" data-slide-to="0" class="active"></li>
<li data-target="#features" data-slide-to="1"></li>
<li data-target="#features" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/niceview.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Lorem Ipsum</h4>
<p class="carousel-text">Some Lorem ipsum.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/rear.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/view.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#features" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#features" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
That's my js file which compiles successfully by mix and my html file. And right now I don't get any errors in the console so I have no clue as to what is wrong.
Please help :(
Bootstrap carousal in the blade file.
add this to your filename.blade.php
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="{{ asset('public/images/1.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/2.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/3.jpg')}}" alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
add this css file like this
<link href="{{ asset('public/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
and add js like this
<script type="text/javascript" src="{{ asset('public/js/jQuery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('public/js/bootstrap.min.js') }}"></script>
using this following step carousal is work.
i hope this will help you to solve your problem
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.
Can't get this carousel to work on a Magento site. I have one image displaying ok, just the transition between images not happening.
Example that im working on here - http://dev.clothesforsale.co.nz/
Code below:
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>slider/example-banner-one.jpg" alt="Slider One" class="img-responsive"/>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>slider/example-banner-two.jpg" alt="Slider Two" class="img-responsive"/>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript">
// <![CDATA[
$(function(){
$('.carousel').carousel();
});
// ]]>
</script>
At first glance, the console shows Object #<Object> has no method 'on' when the page loads, originating on line 163 of bootstrap.js. If I jQuery.fn.jquery in the console to get the jQuery version, it says 1.4.2.
This answer suggests that the on method (which Bootstrap appears to be using) wasn't added until jQuery 1.7. An upgrade might be the first step.