I'm trying to include an image as my navbar header as the code shows below:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="logo.jpg" alt="">
</div>
</div>
</nav>
The icon appears but very small. How can I resize it?
You have to reduce the padding of navbar-brand.
See the following example (https://jsfiddle.net/m9acxw28/1/):
.navbar-brand {
padding:0;
}
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="http://placehold.it/100x100" alt="">
</div>
</div>
</nav>
Hint: Make sure the custom CSS is placed after the Bootstrap CSS!
Related
I am using Bootstrap 4, and I have a pretty complex footer:
...that adjusts its height dynamically. This is a PHP application, so the content in the center of the screen changes. When the content is bigger than the screen, it pushes the footer to the bottom as desired. However, I have scenarios where the content is pretty small and then the footer has whitespace underneath it.
I also have a header.
How can I use CSS to adjust the bootstrap classes so that if (and only if) the height of the content plus the height of the footer is not 100% of the viewport height, it expands the content so that it is?
Here is what it looks like currently:
As you can see, the whitespace is at the bottom of the screen below the footer. I do not want to make a sticky footer and scroll in the middle, I just want the footer to be at the bottom of the screen if the content in between the header and footer isn't taking up the remaining height.
Everything I've seen so far requires you to fix the height of the footer but then I fear the footer will not respond properly on different screen sizes.
Here is my general HTML layout, with bootstrap classes:
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="https://dization.com/" target="_blank"><img src="../public/images/cropped-logo_white.png" width="185" height="58px"></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--/.Navbar-->
<!--Main layout-->
<main class="mt-4">
<div class="container">
<div class="row justify-content-center" id="divCardSignUp">
<div class="col-lg-12">
<div class="card my-5">
<!-- Logo -->
<div class="card-header pt-4 pb-4 text-center bg-light">
<span><img src="../public/images/Logo-no-text.png" alt="" height="30"></span>
</div>
<div class="card-body p-4">
<!-- boot strap rows and cols divs in here -->
</div>
</div>
<!-- end card -->
</div> <!-- end col -->
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small unique-color-dark mt-2">
<!-- Social buttons -->
<div class="primary-color">
<div class="container"></div>
</div>
<!-- Social buttons -->
<!--Footer Links-->
<div class="container mt-5 mb-4 text-center text-md-left">
<div class="row mt-3"></div>
</div>
<!--/.Footer Links-->
<!-- Copyright -->
<div class="footer-copyright text-center py-3"></div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
Here is the only custom CSS I added to the page:
html,
body,
header {
height: 100%;
}
body {
padding-top: 70px;
}
Any help would be appreciated.
Thanks.
Ok, I solved this problem with probably not the most elegant of solutions, but it works for me.
I used a combination of Javascript and CSS as I could not figure out a CSS-only trick.
Again, my biggest constraint is that the footer dynamically changes size based on the screen size, AND the content in the main section changes based on what the server serves. Sometimes the content is large which will require the user to scroll to see the footer (I do not want a sticky footer), and sometimes the content is small which means the footer was showing up right below the content and there was whitespace at the bottom of the footer. Again, I'm using bootstrap 4.5 classes and the only other CSS is listed below.
In order to fix the whitespace, and not use a sticky footer, here is what I did.
CSS:
html,
body,
header {
height: 100%;
}
body {
padding-top: 70px;
}
HTML shell code is the same as it was above:
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="https://dization.com/" target="_blank"><img src="../public/images/cropped-logo_white.png" width="185" height="58px"></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--/.Navbar-->
<!--Main layout-->
<main class="mt-4">
<div class="container">
<div class="row justify-content-center" id="divCardSignUp">
<div class="col-lg-12">
<div class="card my-5">
<!-- Logo -->
<div class="card-header pt-4 pb-4 text-center bg-light">
<span><img src="../public/images/Logo-no-text.png" alt="" height="30"></span>
</div>
<div class="card-body p-4">
<!-- boot strap rows and cols divs in here -->
</div>
</div>
<!-- end card -->
</div> <!-- end col -->
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small unique-color-dark mt-2">
<!-- Social buttons -->
<div class="primary-color">
<div class="container"></div>
</div>
<!-- Social buttons -->
<!--Footer Links-->
<div class="container mt-5 mb-4 text-center text-md-left">
<div class="row mt-3"></div>
</div>
<!--/.Footer Links-->
<!-- Copyright -->
<div class="footer-copyright text-center py-3"></div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
And here is the JS I added before the body closing tag:
<script language="JavaScript">
function footerAlign() {
//Get the height of the footer
var footerHeight = $('footer').height();
//Get the height of the nav bar
var navHeight = $('nav').height();
//Set the min-height of the content to 100% of the viewport height minus the heights of the footer and the nav and in my case 32 px of padding.
$('main').css('min-height', 'calc(100vh - ' + (footerHeight + navHeight + 32) + 'px');
}
$(document).ready(function() {
footerAlign();
});
$(window).resize(function() {
footerAlign();
});
</script>
hey i want the 3 div to be spaced between in the website with the help of bootstrap in the nav bar anmd i am not getting the desired results
i want THE DIV TO BE like this way pls help me to solve it with bootstrap classes
<content of div1> <content of div2> <content of div3>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between ">
<div>// div 1//
</div>
<div class="collapse navbar-collapse " id="navbarSupportedContent">// div 2//
</div>
<div>// div 3//
</div>
</nav>
By default .navbar-collapse is set to flex-grow:1. You need to disable this to get what you want:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between ">
<div>// div 1//
</div>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">// div 2//
</div>
<div>// div 3//
</div>
</nav>
Why there is no navbar in the below snippet? Am I missing something? If yes, What?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
I want like the below image:
Color is changed!
You missed .navbar-default, adding it will show the navbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
Update
Also for your information, <center> tag has been deprecated referring to MDN Web Docs
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
You could use text-align: center or in your case since you are using bootstrap if you want the same effect as <center> you could add the class .text-center to parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid text-center">
<button class="btn btn-large btn-success" onClick="window.print()">Print</button>
</div>
</div>
</div>
</div>
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:
+-----------------------------------------------------------------+
| Hello Thank you for visiting [logo] |
+-----------------------------------------------------------------+
Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<span class="navbar-brand">Hello</span>
<span class="center-block"><span class="center-text">Thank you for visiting</span></span>
<span class="pull-right"><div class="pull-right">[logo]</div></span>
</nav>
Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.
I'm not sure what I"m doing wrong.
I'm not sure why you are using nav but this solution might work for you:
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<p>Hello</p>
</div>
<div class="col-sm-4 text-center">
<p>Thank you for visiting</p>
</div>
<div class="col-sm-4 text-right">
<p>[logo]</p>
</div>
</div>
</div>
Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.
<footer class="navbar navbar-static-bottom navbar-default">
<div class="container" style="width">
<div class="navbar-header">
<div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
Hello
</div>
</div>
<div class="navbar-header">
<div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
Welcome to my website
</div>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-brand">
Logo goes here
</div>
</div>
</div>
</footer>
Enjoy....!
Here is my code,
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://s17.postimg.org/sjco0mvjz/home_slider1.jpg" />
</div>
<div class="item">
<img src="http://s17.postimg.org/7p0bit16n/home_slider2.jpg" />
</div>
<div class="item">
<img src="http://s17.postimg.org/6lg76ugjj/home_slider3.jpg" />
</div>
<div class="item">
<img src="http://s17.postimg.org/mh51a573z/home_slider4.jpg" />
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://s7.postimg.org/5qb3lvxsn/logo_new.png" alt="">
</a>
</div>
</div>
</nav>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
I need something like this, image
May i know, the title "Live Safely with AlertID " to display next to logo..
Which bootstrap class should i use?
Thanks,
you can use <p> Live Safely.....</p> tag for text on the image.
you just have to change the style of the <p> tag something like this.
position:absolute;
margin-left: your_requirement;
margin-top: your_requirement;
and you can add many more according to your requirements.