Bootstrap - Floating action button menu size and shadow - html

Question

I am building an app with Bootstrap 3.3 and Bootstrap Material Design framework. I am trying to make a floating action button that opens when you click it.
In an attempt to do this, I've created this Bootply, which has the following code:
<div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
<li><i class="material-icons">clear</i></li>
</ul>
</div>
The buttons works, but it doesn't look right. There are two issues that are driving me nuts. First, the popup menu isn't transparent. There is like a border and shadow that I can't seem to get rid of.
Second, I can't use the small version of the buttons as shown in the Floating action buttons section of the Bootstrap Material Design framework page. I'm not sure what I'm doing wrong.

Answer 1

So the .dropdown-menu in bootstrap CSS has by default box-shadow and border, which you have to reset it in order to make it transparent.
Plus in your Bootply it's not applying the Material Design Icons, because you didn't link the fonts.
Regarding small icons, add .btn-group-sm to .btn-group
Here is a working SNIPPET with examples for every sizes.
.floating-action-button {
position: relative;
top: 100px;
margin-left: 50px;
}
ul.dropdown-menu {
box-shadow: none;
border: 0;
min-width:0;
background:transparent
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Code -->
<div class="btn-group btn-group-lg dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div><div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-sm dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-xs dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>

Answer 2

I wouldn't say that it is ideal, but the following seems to solve part of your problem.
.dropdown-menu {
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
Unfortunately, I was not able to figure out what the material-icons class didn't work. Hopefully this answer will help you get closer to a solution.