I have this site at the moment with this code:
<body>
<nav class="navbar bg-primary">
<div class="container-inline navbar-brand">
<img src="img/logo.png"width="55">
<a class="text-light">Test</a>
</div>
<a class="nav-link text-light">One</a>
<a class="nav-link text-light">Two</a>
<a class="nav-link text-light">Three</a>
<a class="nav-link text-light">Four</a>
</nav>
<h1>Hello</h1>
</body>
I want there to be some more spacing between the text "Test" and the logo image, I have tried this such as ml-3 and pl-3 and similar, however none of those seem to be working.,
Apply style with margin property to your img element, u can adjust the pixel
<img src="img/logo.png" width="55" style="margin-right:20px">
You can use margin property and padding property of image and make sure to confirm the margin or padding when the display size changes . I think youre trying to make responsive as well so margin of px doesnt change with display size . you`re using bootstrap right.
class="navbar-brand"
Add class to your image this will give you right margin .
On the div for the image you could add a mr-5
<div class="container-inline navbar-brand mr-5">
<img src="img/logo.png"width="55">
<a class="text-light">Test</a>
</div>
If you don't need too much space that should work.
mr ranges from 1-5 so adjust as you see fit.
There is no longer ml-* in Bootstrap 5. It's been replaced with ms-*. Read about the changes from Bootstrap 4 to Bootstrap 5.
<div class="container-inline navbar-brand">
<img src=".." width="55">
<a class="text-light d-inline-block ms-3">Test</a>
</div>
Codeply
Related
I am using bootstrap to conditionally display content only on larger devices. It works, but there is an issue:
<a class="navbar-brand p-0" href="#"><img src="images/logo.png" alt=""><span class="d-none d-md-block">My strapline<span></a>
The problem - the span content now aligns under the logo, rather than next to it without the "d-none d-md-block" class attributes.
How do I get the span content to stay inline with the logo?
Thank you
You can add the class "d-inline-block" to the span element to make it an inline-block level element and keep the span content inline with the logo.
<a class="navbar-brand p-0" href="#">
<img src="images/logo.png" alt="">
<span class="d-none d-md-inline-block">My strapline<span>
</a>
This will keep the span content inline with the logo on devices with medium or larger screen sizes (viewports width >= 768px), and hide the span content on smaller devices with viewports width < 768px.
check the code here:
https://landing-page.adrianojedaf.repl.co
I thought it could be the overflow-x so I disable the Scroll Bar in CSS but the white space on top of the navigation-bar is still there. When I use the Browser's inspector, it seems like the white space is part of the header, but it doesn't have any margin or other property that could be generating it so I really don't know.
Here put this on your code instead.I remove your unknown image tag To resolve your problem and this should work.
<header id="header">
<nav id="nav-bar">
<div class="content-width">
<img src="images/carrot.png">
<a class="logo" href="index.html">Carrot</a>
<div class="nav-right">
<a class="nav-link" href="#submit">Features</a>
<a class="nav-link" href="#goVideo">Process</a>
<a class="nav-link" href="#prices">Prices</a>
</div>
</div>
</nav>
</header>
<div class="container-fluid text-center" style="background-color:#1a242f;">
<div class="row">
<div class="col-sm-2">
</div>
<div class="imageheader col-sm-4">
<a href="index.php">
<img class="img-responsive" src="images/logo & name.jpg">
</a>
</div>
<div class="search col-sm-4" style="padding-left : 12%;">
<ul class="list-group" style="background-color: #6ABED8;">
<li>
<a href="careersatbvimit.php" style="color: white;">
Career's At BVIMIT
</a> |
</li>
<li>
<a href="studentlogin.php" style="color: white;">
Student Login
</a>
</li>
</ul>
<br><br><br><br>
<p class="socialicons" style="color : #f4511e; margin-left: 40%;">
</p>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
When I use img-responsive, the image becomes small when the
browser increases the "tablet-size". But is perfect for mobile-size and tablet-size browser.
When I change img-responsive to image-fluid, the image size
is what i want for the desktop-size browser.
But the <p> elements gets overlapped on it during the resizing of the browser. Also when I resize the browser to "mobile-size"(using image-fluid), I get a horizontal scroll-bar for my image since it doesn't resize and stays as it was on desktop-size browser.
What has to be removed in my code to make it responsive(with height and width being responsive) on all screens?
My second problem is that, i have to use an empty div from left for 2 cols to place my image at the center of the screen (third line from top). Can I place my div(using col-*-*) in the center without using any empty div tags. ? Is there any css code for that ?
I used padding-left : 12% to make the size of the <ul> small and be on the right side of the column. Can it be resized and placed on right without using padding-left ?
For your first problem, i found a quick fix by setting style="max-width:100%;height:auto;" on your image (max-width prevent the image to overflow, height auto keeps the proportions).
Your second problem is just a bootstrap class you are missing : col-XX-offset-X, in your example you need to set <div class=col-sm-4 col-sm-offset-2>
For your third question, you can avoid the padding by setting on your right aligned element a width and a left marginlike so :
<ul class="list-group" style="background-color: #6ABED8;width:60%;margin:0 0 0 auto">
Hope that helps
In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?
You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>
Instead of displaying the brand in the navbar as text I included the img of the brand-logo which I scaled down for responsive reasons with "max-width 50%". the parent of the img is a hyperlink tag . the issue: the width of a remains displaying the original width of 100% of the img (being 350px instead of 50% of 350px). I have not been able to find a solution and kindly ask for your help.
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#" style="background-color: black;">
<img src="http://placehold.it/350x150" style="max-width: 50%;">
</a>
</div>