Bootstrap - Floating action button menu size and shadow

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><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a></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><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </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><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </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><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </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><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
    </li>
  </ul>
</div>