I have a button group but the middle button is a link so it should b a tag (i can change its button and use js to navigate but I prefer not to )
here is the code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner">
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
center
<button type="button" class="btn btn-warning yekan ">up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
here is the result
as you can see the middle btn has a border and gradient, how can I change it so it would look like buttons? i've tried adding border:none to all .btn and button group it didn't work
Simply remove type=button from the a
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner" >
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
<a href="link.php" class="btn btn-warning yekan pjax" > center</a>
<button type="button" class="btn btn-warning yekan " >up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
Related
I want to add google play and apple icons with the download button
the apple icon works fine but the google play doesn't show and i don' know why
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fa fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i>Download 2</button>
Just replace the link with the following:
Your code will work just fine.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Cause you're using fontawsome version 4.7.0 and the google play icon is version 5.0.0. Here is the correct code you must use instead.
You must also change the class of the apple icon to fab fa-apple cause it's for version 5.8.0 of fontawsome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<h1>Meet new and interesting dogs nearby.</h1>
<!-- <button type="button" class="btn btn-dark btn-lg"><i class="fa fa-apple"></i>Download</button> -->
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i>Download 2</button>
How can I remove the a tag style / link style inside a span?
Code:
<button type="button" class="btn btn-danger btn-lg no-border" id="foo">
<a href="#">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</a>
</button>
You could remove the "link style" by removing the anchor tag which shouldn't be there anyway..
<button type="button" class="btn btn-danger btn-lg no-border" id="foo">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</button>
I think your code should look this this:
<button type="submit" class="btn btn-danger btn-lg no-border" id="foo">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</button>
or this:
<a href="#" class="btn btn-danger btn-lg no-border" id="foo">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>foo!
</a>
You cannot put an a tag inside a button.
If you want to remove the styling of the anchor tag, you can simply target it in your css. Like so:
<style>
a{
text-decoration: none;
/* other styles here */
}
</style>
I'm using Bootstrap 3 and I have a line of buttons. One of them is a <a> button, or: <a class='btn btn-default' role='button'>Button here</a>; the rest are <button> elements with the same classes.
I was expecting to have them all correctly aligned and spaced, as seen in Bootstrap's examples, however, the result was this:
As you can see, the first button, the one specified as <a> doesn't have the right margin with the next button. What can be causing this?
Here's my HTML:
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
The anchor tags and buttons are correctly spaced because they are inline-block- not sure how there is no spacing between the a and the button you got over there.
Try floating them and then you can remove the space between them if you want to- and set the required margin if needed.
They must be correctly aligned and spaced by default- see below snippet:
a.btn, button.btn {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
See what happens when we float them:
a.btn, button.btn {
margin: 0;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
I am trying to align a button and li in a same line as the button.
Here's the fiddle
<button type="submit" class="btn btn-gray btn-sm">Log In</button>
<ul>
<li style="list-style-type:none;">
<a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?
</a>
</li>
</ul>
You can do this two ways, display: inline-block; or float: left; in this case I did the display property. Notice I also added two mockup classes for clarity, you can change them to whatever
here is the fiddle
.btn__align {
display: inline-block;
}
.ul__element {
display: inline-block;
}
add class pull-left to button
<button type="submit" class="btn btn-gray btn-sm pull-left">Log In</button>
<ul>
<li style="list-style-type:none;"><a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?</a></li>
you can do it through div or tables
https://jsfiddle.net/j538zkwh/5/
<table >
<td>
<td>
<button type="submit" class="btn btn-gray btn-sm">Log In</button> <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password? </a>
</td>
</tr>
</table>
try to add pull-left class at button will solve issue also find code posted below...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="submit" class="btn btn-gray btn-sm pull-left" >Log In</button>
<ul>
<li style="list-style-type:none;">
<a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?
</a>
</li>
</ul>
Simple method is Add this to your css Code
display:inline-block;
Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.