I want to add font awesome in nav-bar bootstrap but it showing this kind of problem
My problem is i want to user bigger icon size but it is not center aligning
I can solve it by giving absolute position to icon and extra left margin to text.
But is there any proper solution for this
Demo: http://www.bootply.com/MgKvoq91WI
Add vertical-align: middle; to icon class:
.fa-2x{
vertical-align: middle;
}
See updated DEMO
Just replace below line in your html
<li class="active"><i class="fa fa-plus"></i> <b>Create New</b></li>
fa fa-plus fa-* change in icon size, but in your case no need to use.
Use this
<li class="active"><i class="fa fa-plus"></i> <b>Create New</b></li>
You use class="fa fa-plus fa-2x" class that why this show bigger.
Related
I would like to have a floating at the bottom right side of the image inside a card.
here's my sample https://codepen.io/chunallen/pen/bPGJOP?editors=1000
The problem here is the button is behind of the v-card-title
Expected Result
If you add style="height: 100px; position: relative" to v-card-title, move the btn beneath the h3, and change bottom to top then it'll work.
<v-card-title primary-title style="height: 100px; position: relative">
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<v-btn color="pink" dark small absolute top right fab>
<v-icon>add</v-icon>
</v-btn>
</div>
</v-card-title>
Sample
A bit late to the party, but for people with the same issue:
a button placed inside v-img will cut the button of.
a seperate card around the image and the button in the card (after the image) does the trick
I'm trying to duplicate the effect I see in the Bootstrap docs and elsewhere:
When you hover over an h1/h2/h3 etc, a glyph appears that enables you to copy/paste a url that includes a fragment identifier eg http://foo.com/woof.html#page_fragment
Picture:
The "chain" icon only shows on the left on hover
Question: is this affect available from within the Bootstrap library or elsewhere?
And what is the name of this type of UX?
Like you noticed bootstrap has no native way to do that : however, with little css and html it will work perfectly :
Working fiddle : https://jsfiddle.net/5of43a4r/
CSS :
h1:hover a.anchorjs-link {
display: block !important;
}
HTML :
<h1>
<a class="anchorjs-link" href="#page_fragment" style="position: absolute; margin-left: -1em; padding-right: 0.5em;display: none">
<span class="glyphicon glyphicon-link" aria-hidden="true"></span> </a>
H1 TEXT
</h1>
Starting with the "anchorJS" clue from Sébastien's answer, I found Bootstrap Anchor, "The missing Bootstrap plugin for anchor support."
I am using Bootstrap's grid to align an input, a button and an alert message.
However, I found the height of alert message is much higher than that of button and input.
Is there a way to make the height of all elements in grid consistent?
Here is example and code:
https://jsfiddle.net/rktg0L2w/
<div class="container-fluid">
<div class="row" >
<div class="col-xs-3 col-xs-offset-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
<div class="alert alert-success"> Result: </div>
</div>
</div>
</div>
Thanks
Derek
Alert div isn't made to place inside your views. It has it's own padding and margin. It is usually put at the top of page.
However if you want to put it inside your view. You could either make it small by removing padding or make your view vertical align.
I made both alternatives in this https://jsfiddle.net/rktg0L2w/1/
1) For small alter div that matches your input change padding:
.alert-small{
padding: 7px;
}
2) In case you want to make both input and alter vertical align:
Place vcenter class on your row div and alert-large on your alter div.
.vcenter {
display: flex;
align-items: center;
}
.alert-large{
margin-bottom: 0px;
}
Bootstrap has its own standard, however you can change the code by edit the raw bootstrap css or override the bootstrap css code. For example :
padding is the problem in your case, click here for 1st picture
hola, click here for 2nd picture
However, you can make it specific by adding new class or with your superpower and your handsomeness tho
t(.__.t) my life
I am using the "Nearby Image Partial Visible" slider in my jspx page. The slider works fine except for one issue. The right arrow for navigation does not appear. ALthough my source code is correct, when I run the page the structure is changed. By looking at the HTML DOM of the page, I figured that is because the of the right arrow is nested inside element of the left arrow.
My source code for the arrows is the following-
<span u="arrowleft" class="jssora13l" style="top: 123px; left: 30px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora13r" style="top: 123px; right: 30px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
But in the browser the HTML is as follows:
<span u="arrowleft" class="jssora13l" style="top: 123px; left: 30px;">
<!-- Arrow Right -->
<span u="arrowright" class="jssora13r" style="top: 123px; right: 30px;">
</span>
</span>
I cant figure out the issue. Please help.
I have made a sidenav and its collapse button is in the navbar using the materialize framework. The collapse-button starts disappering if the screen resolution is more than 993px. This is the code
<div class="nav-wrapper">
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
<img src="Logo.png" width="120">
<ul id="nav-mobile" class="right">
<li>
<img src="work/marker-5.png">Bangkok
</li>
</ul>
</div>
</nav>
My script is this
$(".button-collapse").sideNav({
menuWidth: 350,
closeOnClick: true
});
Is this due to any media query in the materialize framework?
If you remove the button-collapse class then the menu will remain visible on wider screens.
That it's because the materialize only use this button for phones and tablets. If you want to use it for large devise you need to add the following class to your menu item like they said in their documentation
Fullscreen HTML Structure
If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .button-collapse
When you do it, the code will remain in this way.
<i class="mdi-navigation-menu show-on-large"></i>
also i actually change the class from "mdi-navigation-menu" to "material-icons" and use the menu icon. In this case the code is going to look like this:
<i class="material-icons show-on-large">menu</i>
This is the link of the Materialize Documentation
Hope this help you! :) In my personal opinion materializeCSS need more specific documentation for certain things.
In you materialize.css file , change the following code,
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: none;
}
}
To
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: block;
}
}