I have a bootstrap project and I want to quickly change the span. So I have a span like that with my inline css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span style="color:#fff !important;padding-top:10px !important;font-size:26px !important;font-weight:bold !important; display: block">Title</span>
</div>
</div>
</div>
But the thing is that style is not getting applied, however I can see the styles using dev tools:
Moreover then if I disable/enable any tickbox like that:
Then all styles gets applied.
Any ideas is what is going on and how to fix that?
when I tried it, everything is working except padding-top. To apply padding-top, use
display: block
or
display: inline-block
Edit:
Not sure if you know this already but span is an inline element which means, margin and padding will not take effect. Hence, you need to explicitly add display:block or inline-block
Related
I am trying to use the Bootstrap class="icon-bar" but its not showing up on the screen.
The elements are present in the screen but default height and width is showing up 0.
I have been through multiple questions on Stack Overflow and different sites but no help.
Following is the code:
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top bg-light">
<div class="containter">
<button type="button" class ="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
</body>
Image:
Links that I have followed:
Bootstrap icon-bar span not visible
Bootstrap icon-bar not showing
Bootstap:span class icon bar not working
As answered in the comments by #Akhi, there is no span.icon-bar in Bootstrap 4.
Instead we need to use the class: <span class="navbar-toggler-icon"></span>
Doing so has resolved my problem.
Update: Here is the latest jsFiddle.
You'll likely need to resize the Result pane, or even break it out into its own window, in order to see it in all its glory.
As you can see, I have a 400x200 logo image that I have attempted to make responsive (via the .img-responsive class), however it continues to remain the same size (400x200) and is not resizing + nesting nicely into my header navbar.
Ideally the image should resize and fit inside the navbar right in line with the menu items (MUCH AMAZE, SUCH WOW, etc.).
I have a feeling that it has something to do with this part:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>
I'm not really sure what this "Toggle navigation" <button/> is doing (the one that comes right before my logo <img/>). Admittedly, I am cargo culting here and just got some generic Bootstrap 3 code off their examples site. Am I applying the wrong styling rules? Do I need to put the <img/> in a form or div or some other type of container here? Where am I going awry?
add this may help you
.img-responsive
{
width:100%;
}
NOTE
I am using bootstrap so when a user is using a mobile device the button element's CSS is overwritten with a media query of display:none, so that it doesn't interfere with my image being centered.
I'm trying to center my image that's within div tag. However this seems to be a little tricky. When I use text-align:center;, it doesn't seem to do anything and neither does margin:0 auto;.
HTML Mark-Up:
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="#page-top"><img id="header-logo" src="assets/img/logo.png"></a>
</div>
Does anyone have any idea why it won't center within the div element?
The best you can do is to center the a tag that wraps your img:
a.navbar-brand {
text-align:center;
display:block;
}
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="#page-top"><img id="header-logo" src="assets/img/logo.png"></a>
</div>
Although it isn't compliant to HTML5, it is supported by almost all browsers (i never found one that didn't support it):
<center>I am perfectly centered!</center>
The center tag. Anything inside this will be centered, img's, div's, anything.
The center tag is deprecated but is still widely supported.
Put a <center></center> around your <a></a> and you should be fine.
The center tag is 'ancient', so consider other answers first
I found this button tag in the basic bootstrap html template (I added the arrows)
<div class="navbar-header">
--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
It's completely invisible (at least to me), and it doesn't seem to have any effect (it doesn't happen anything when I click).
Is it supposed to be like this, and what's the point of it?
Where is the button: That button can be seen when you reduce the webpage width, either by zooming in or using a mobile device to access the webpage.
What is this button for: That button is use to toggle the navbar dropdown on mobile devices.
Those three lines stacked on top of each other is the button:
It's the menu toggle for small displays like smartphones. On big screen it will be hidden.
As an addition to the above answers.
In order for the button to have a working functionality, you need to load jquery library and right after it the bootstrap jquery library.
These can be included either in the head tag of your html code or just before the end of the body tag (2nd option is best practice).
Try it like this (cdn used):
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I past over an afternoon to search an answer at my issue. I'm still blocked with that. I'm unable to change the height of the navbar in my /dist/css/bootstrap.css file.
I found a lot of topics who deals about this problem but any of them allow me to pass through my problem.
I have the feeling that any modifications I've done in my bootstrap.css do nothing. But when I tried to remain the script who include bootstrap in my index.php this does a major effect, so I know that bootstrap is successfully loaded.
Then I tried to modify some lines in bootstrap.css in order to test what does effect :
.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {min-height:28px !important;}
I changed the height value.
The div class I use in my html code :
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.php">Medieval Fields</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
What I load in my head :
<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
CSS.
Use the C. The Cascading portion of the acronym refers to the fact that linking another style-sheet after bootstrap will overwrite the bootstrap values.
As Abhitalks pointed out. Sorry just saw that.