I'm trying to implement a system and I need buttons inside linked group list. The problem is when I click on the button it opens the link of the linked item.
The code bellow is what I have on my system.
edit:
I need the full item to be clickable; excluding the buttons (Not using link just on the text).
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<a class="list-group-item list-group-item-info" href="https://www.fumep.edu.br/eep/" target="_blank">
EEP
<span class="pull-right">
<div class="btn-group" role="group" aria-label="...">
<span class="btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</span>
<span class="btn btn-xs btn-danger" >
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</div>
</span>
</a>
You can use CSS like this..
.list-group-item>.pull-right{
cursor: default;
}
Add onclick="return false;" to the btn-group.
Demo
If you want the full item clickable except buttons, you can try this with jQuery
$('.btn-group .btn').click(function(
e.preventDefault();
});
Related
I have the code and markup shown here for a button, but for some reason the dropdown functionality does not work - need a fresh pair of eyes please...
<td class="text-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu shadow animated--grow-in">
<a class="dropdown-item">
<i class="fas fa-pencil-alt"></i> Edit
</a>
<form class="d-inline">
<a class="dropdown-item"><i class="fas fa-trash-alt"></i> Delete</a>
</form>
</div>
</div>
</td>
Have you refered the css file and js file ?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" >
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" ></script>
Notice the css file should be refer before other css file and the order of js file could not be reversed
In my case:
I would like to create an icon for multi file upload using bootstrap-4.
I have referred this below code for single file upload >
but, how to create an icon for multi file upload
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/
jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Upload Glyph</h2>
<p>Upload icon: <span class="glyphicon glyphicon-upload"></span></p>
<p>Upload icon as a link:
<a href="#">
<span class="glyphicon glyphicon-upload"></span>
</a>
</p>
<p>Upload icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</p>
<p>Upload icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-upload"></span> Upload
</a>
</p>
<p>Unicode:
<span class="glyphicon"></span>
</p>
</div>
this is the icon, it produced, but how can I make it as multifileupload ?
SINGLE-file-upload-icon
Bootstrap 4 doesn't include an icon font like it did in version 3. This leaves people free to choose whichever icon font they want to use.
From your code it looks like you're using Bootstrap 3 though. All of the available icons are listed in their documentation. Just replace the glyphicon-upload class with the class for the icon you want to use (for instance, glyphicon-open).
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-open"></span> Multi upload
</button>
Alternatively, rather than trying to create a new icon yourself, you can use two and change their positioning to give the appearance of a single icon:
.btn .glyphicon + .glyphicon {
margin-left: -5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-arrow-up"></span><span class="glyphicon glyphicon-arrow-up"></span> Multi upload
</button>
When i use :
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
instead of star, its displaying an arrow,
when i use search glyphicon, its displaying a rhombus. Few glyph are not getting displayed.
bootstrap.min.css
bootstrap-theme.min.css
bootstrap-theme.css
bootstrap.css
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
bootstrap.min.js
Can somebody please help?
Thank you
This might help you
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<div class="the-icons">
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
Demo Here
Make Sure to include bootstrap.min.css Link is Here
Demo JS Fiddle:
I can't implement the href into the buttons.
It will work if I put it this way :
<a href="/">
<button type="button" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</button>
</a>
But this will result in this mess :
Is there any simple way I can fix this? Thanks alot!
Apply the btn class to the a instead.
<a href="/" class="btn btn-default" ...
Also take a look at the docs.
I updated your fiddle for the buttons to work properly:http://jsfiddle.net/ettmujvg/9/
<a href="#" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</a>
I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do this?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
Increase the font-size of glyphicon to increase all icons size.
.glyphicon {
font-size: 50px;
}
To target only one icon,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
Fontawesome has a perfect solution to this.
I implemented the same. just on your main .css file add this
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
In your example you just have to do this.
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
If you are using bootstrap and font-awesome then it is easy, no need to write a single line of new code, just add fa-Nx, as big you want, See the demo
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Yes, and basically you can also use inline style:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
try to use heading, no need extra css
<h1 class="glyphicon glyphicon-plus"></h1>
For ex ..
add class:
btn-lg - LARGE
btn-sm - SMALL
btn-xs - Very small
<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>
<button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
Ref link Bootstrap : Glyphicons Bootstrap
I've used bootstrap header classes ("h1", "h2", etc.) for this. This way you get all the style benefits without using the actual tags. Here is an example:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>