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.
Related
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
<a href="index.html" class="pull-left d-none d-lg-block d-xl-none">
<div id="logo-img" alt="image"></div>
</a>
i wanted an img to display only on >=large screens but the image is showing on every screen.
Your code should work just fine the way it is, displaying the element in screens between 992px and 1200px.
Make sure your bootstrap's css files are being loaded correctly.
#media screen only min-width(somepixel){display:none;}
The following is not an option
<div class="container">
<a href="/Home">
<img class="img-responsive center-block" src="/home_logo.png" alt="Home"/>
</a>
</div>
Cause the entire row (container) is now clickable and not just the home_logo.png
Is there any graceful way (maybe a bootstrap class) to make only the image clickable (and also for the image to be responsive).
First of all, you may to see, that you have two elements with display: block behavior (classes .container, center-block and img-responsive have display: block property) and one element with display: inline behavior (tag's <a> default behavior). You need to change display: inline to display: inline-block. Simple solution to center nesting elements is to add to parent element (div.container in this case) one more Bootstrap's class .text-center. Class .center-block is extra and you may to remove it.
<div class="container text-center">
<a class="inline_block" href="/Home">
<img class="img-responsive" src="/home_logo.png" alt="Home">
</a>
</div>
.inline_block {
display: inline-block;
}
JSFiddle-example
try this
<div class="container text-center">
<a href="/Home" class="inline_block">
<img class="img-responsive center-block" src="http://icons.iconarchive.com/icons/janosch500/tropical-waters-folders/512/Burn-icon.png" alt="Home">
</a>
</div>
working fiddle
In Bootstrap 5 you can use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">
<img src="/images/jack.jpg">
</div>
Check docs link - https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
See http://codepen.io/robbielaldrich/pen/ZWJyjO?editors=1100.
HTML:
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
The <a> tag seems to be extending to the margin of the <img>, but I can't reduce the margin or the image will no longer be centered.
Thanks for any help you can give!
Why you dont use a div to wrap and halign your image?
see my code
HTML
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
CSS
img{
display: inline-block
}
EDIT:
Codepen: http://codepen.io/anon/pen/grxjmK
Bootstrap's CSS is sets both center-block and img-responsive to display: block
A block level element becomes like a <div> and will take up the whole width of its container if a width or max-width isn't specified. The anchor is wrapped around the entire image block, including the empty space.
You could override the display: block easy enough and center-align the image as if it were text:
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" style="display: inline-block !important;" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
But without knowing the context of the layout I can't say if there is a better solution.
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>