Home / css / Colorful and creative Dropdown using Bootstrap 4.0 and CSS

Colorful and creative Dropdown using Bootstrap 4.0 and CSS

Colorful and creative Dropdown using Bootstrap 4.0 and CSS

Dropdown are an integral part of any application which has forms and wherein the user needs to input his or her details. Colorful and creative dropdowns enhances the user experience.This dropwdown is created by Erik using CSS and Boostrap 4.

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
      
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="style.css" >
    </head>
<body>
 
    <div class="container py-5">
        <div class="row">
            <div class="col-md-3 col-sm-6 py-5" >
                    <div class="col-md-12">
                           <div class="btn-group">
  <button type="button" class="btn btn-danger">This is Dropdown</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" shadow-none data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
                    </div>
                        
            </div>
            <div class="col-md-3 col-sm-6 py-5">
                    <div class="col-md-12">
                           <div class="btn-group">
  <button type="button" class="btn btn-danger">This is Dropdown</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" shadow-none data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
                    </div>
            </div>
          <div class="col-md-3 col-sm-6 py-5">
                    <div class="col-md-12">
                            <div class="btn-group">
  <button type="button" class="btn btn-danger">This is Dropdown</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" shadow-none data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
                    </div>
            </div>
            <div class="col-md-3 col-sm-6 py-5">
                  <div class="col-md-12">
                           <div class="btn-group">
  <button type="button" class="btn btn-danger">This is Dropdown</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" shadow-none data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
                  </div>
            </div>
       
    </div>
</div>



</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

   
</html>





 

 

body{
    font-family: 'Montserrat'!important;
    font-size: 15px;
}
.dropdown-toggle {
    background-color: #F5BE1F;
    border-color: #F5BE1F !important;
    box-shadow: none !important;
}
.dropdown-toggle:hover{
    background-color: #F5BE1F;
    border-color: #F5BE1F;
    outline:none !important;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: none !important;
}
.dropdown-menu {
    border: 1px solid #ccc !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 40px rgba(0,0,0,.4);
    -webkit-transition: opacity .218s;
    -moz-transition: opacity .218s;
    -o-transition: opacity .218s;
    transition: opacity .228s;
    margin: 1px 0 0;
    min-width: 170px;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #F5BE1F;
    border-color: #F5BE1F;
    outline:none !important;
    box-shadow: none !important;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
}

 

Check Also

MaterialDesignRegLoginAnimation

Login & Registration using Materialize CSS with cool animation

Single form for Login & Registration using Materialize css with cool animation Login and Registration …

Leave a Reply

Your email address will not be published. Required fields are marked *