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>
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'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();
});
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 have added a a button and Styled it using Bootstrap but the icon(Font) of the button is not as per the styling.I am not able to figure out what is missing in the Markup..Here is the HTML..
<button class="btn-u btn-u-xs btn-brd btn-brd-hover" type="button" title="Add New" data-toggle="modal" data-target="#responsive" onclick="">
<i class="fa fa-plus"></i>
<span class="hidden-xs hidden-sm">Add New</span>
</button>
Please help me to resolve this .Thanks
Bootstrap doesn't include the fa fa icons. put this in your head and you're good to go
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
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