I have these three bootstrap toggle buttons that alter the screen sizes according to requirement.
Now i been trying to make one of these buttons "active" defaultly as the page loads.
The code goes as :
<div class="vd_panel-menu hidden-sm hidden-xs" data-intro="<strong>Expand Control</strong><br/>" data-step=5 data-position="left">
<div data-action="remove-navbar" data-original-title="" data-toggle="tooltip" data-placement="bottom" class="remove-navbar-button menu"> <i class="fa fa-arrows-h" ></i> </div>
<div data-action="remove-header" data-original-title="" data-toggle="tooltip" data-placement="bottom" class="remove-header-button menu"> <i class="fa fa-arrows-v"></i> </div>
<div data-action="fullscreen" data-original-title="" data-toggle="tooltip" data-placement="bottom" class="fullscreen-button menu"> <i class="glyphicon glyphicon-fullscreen"></i> </div>
</div>
Any help is appreciated..
Considering the first button and assume it is been active which means your Button Class should look like this class="remove-navbar-button menu active">
.active is the default css of bootstrap whenever you need to active the button by default.you have to call that class by simply put active
Bootstrap toggle
Related
I have a cshtml file that takes care of displaying two buttons below each other in the upper right corner of the screen. Bootstrap 3.3.4 is used.
Now I need to add text to the left of the first button and I managed to do so with the below code, but any vertical alignment is non-existent, as this image shows:
Preferably I'd have the invisible line on which "This is the text" as it were stands lowered to the bottom border of the first button. The second option is to have the text vertically centered relative to the first button, that would be fine as well. How can I accomplish this with bootstrap 3.3.4?
This is the code:
<div class="pull-right">
<button class="btn btn-default btn-xs" data-bind="click: $root.logout">
<i class="fa fa-power-off"></i>
<span data-bind="translate: 'button-logout'"></span>
</button>
<a class="btn btn-default btn-xs" href="#Url.Action("Index", "Relations", new {Area = "Administration"})">
<i class="fa fa-cog"></i>
<span data-bind="translate: 'button-administration'"></span>
</a>
</div>
<div class="pull-right">
<span>This is the text </span>
</div>
Thanks!
I'm new to Bootstrap 4 and I'm designing a very simple page using Bootstrap 4. I created a NAV where I need a logo and company name to the left (this is working) and I need two button to the right of the NAV. I've found many suggestion in forums, but none seem to work for me. I'm stuck.
This is my HTML code:
<nav class="navbar bg-avesta-blue">
<div class="row">
<div class="col-sm-12">
<a class="navbar-brand text-light" href="#">
<img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
<h3 class="pt-1">
AVESTA
</h3>
</a>
<div class="float-right text-right">
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
</div>
</div>
</div>
Here is what it looks like right now:
As you can see, both buttons are aligned to the left. I need them to the right.
The Navbar has supported content, and the grid row>col aren't designed to be used inside the Navbar. Read and follow the documentation.
When you use .row inside the flexbox Navbar it will not be full-width as usual and will "shrink" to the left side. You can set w-100 to make the row full-width, but the better approach is to use the supported Navbar content as intended.
"Use our spacing and flex utility classes for controlling spacing and
alignment within navbars"
https://www.codeply.com/go/Ce7CVrR5rZ
<nav class="navbar bg-avesta-blue">
<a class="navbar-brand text-light" href="#">
<img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
<h3 class="pt-1">
AVESTA
</h3>
</a>
<div class="ml-auto">
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
</div>
</nav>
Once you have the correct Navbar structure, alignment can be done using auto-margins or flexbox utilities as explained in the other related questions
I am having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.
<div class="jumbotron">
<p>
<button type="button" class="btn btn-default pull-right">
<i class="fa fa-plus" title="Edit"></i> </button>
</p>
http://jsfiddle.net/py7vA/217/
How would I fix this?
Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.
<i class="fa fa-plus"></i>
You can do a couple different things one is what Ibrahim mentioned or:
<div class="jumbotron">
<p>
<i class="fa fa-plus btn btn-default pull-right" title="Edit"></i>
</p>
</div>
I am having problems a bootstrap button to work. We are making a site that allows people to vote up or down on various items.
The vote-up button works, however the vote-down doesn't. When I hover over the vote-down button it doesn't
Here is the HTML.
<div class="content-left-sidebar-meta">
<div class="post-vote-header">
<a class="btn btn-default post-vote post-vote-up" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-up" title="Like">
<i class="fa fa-chevron-up"></i></a>
<div class="vote-count">0</div>
<a class="btn btn-default post-vote post-vote-down" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-down" title="Dislike">
<i class="fa fa-chevron-down"></i></a>
</div>
</div>
I'm currently using 2 Font Awesome icons. The problem is that I want to add text under each one that align with these icons. The problem is that the text is centered on the page but not under the corresponding icons.
Code:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<a href="#about" class="btn btn-circle page-scroll btn-lg">
<i class="fa fa-angle-double-down animated"></i>
</a>
<a href="#contact" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>About Contact
</div>
I think this is what you want to do. Here is the fiddle:
http://jsfiddle.net/plushyObject/02s7wnm8/
<div class="col-md-8 col-md-offset-2 text-center outline">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<div class="col-sm-4 outline">
<a href="#about" class="btn btn-circle page-scroll btn-lg outline">
<i class="fa fa-angle-double-down fa-fw"></i>
</a>
<p class="outline">
Text is centered by 'text-center' class inherited from first
column.
</p>
</div>
</div>
If you text-align the parent element, it will be inherited by the picture.
CSS
.container {
text-align: center;
}
Line it up using an HTML <table>, and style it with CSS. That way it will stay on top of the icons correctly.
http://jsfiddle.net/vd6smL75/