CSS for dropdown button

Question

I want to make a dropdown button like this

but, I tried to make my own, but not appropriate. My result like this:

This is my code in view

<div class="form-group col-sm-6">
    {!! Form::label('category_id', 'Category:') !!}
    <div class="dropdown dropdown-full-width dropdown-category">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <span class="name">
                <span id="category-select">Choose Category</span>
            </span>
        </button>
    <div class="dropdown-menu row">
        <div class="col-md-4">
            <li><strong>By Occasions</strong></li>                                   
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Anniversaries</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Birthday</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Congratulations</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Romance</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Sympathy</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['occasions']" class="category-radio">Valentine</label>
                </div>
            </li>
        </div>

        <div class="col-md-4">
            <li><strong>By Types</strong></li>                                   
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Arrangements</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Baskets</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Bosquets</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Flower Board</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Hampers</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['types']" class="category-radio">Native and Wild Flowers</label>
                </div>
            </li>
        </div>

        <div class="col-md-4">
            <li><strong>By Flowers</strong></li>                                   
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Crysantemum</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Jasmine</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Lily</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Orchid</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Rose</label>
                </div>
            </li>
            <li><div class="checkbox">
                    <label><input type="radio" name="category['flowers']" class="category-radio">Tulip</label>
                </div>
            </li>
        </div>
    </div>
    </div>
</div>

Paste your CSS and js you have tried, so can rectify your issue. — Jithin Raj P R
– Jithin Raj P R, Commented Jul 24, 2017 at 6:48
Easiest solution would be that you could make the whole div with a width of 100% act like a button for submitting your form. You will have only to add styles you need tho that div and put an onclick in there — JSEvgeny
– JSEvgeny, Commented Jul 24, 2017 at 6:51

Gerard · Accepted Answer · 2017-07-24 08:15:32Z

I made the button and the menu width: 100% and used float: left for the different menu categories. Also included a caret at the right side of the button.

.dropdown-category button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-menu.row {
  width: 100%;
}

.dropdown-menu.row .col-md-4 {
  float: left;
  width: 33%;
}

.dropdown-menu.row .col-md-4:not(:last-child) {
  border-right: thin solid lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-sm-6">
  <div class="dropdown dropdown-full-width dropdown-category">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <span class="name">
                <span id="category-select">Choose Category</span>
            </span>
            <span class="caret"></span>
        </button>
    <div class="dropdown-menu row">
      <div class="col-md-4">
        <li><strong>By Occasions</strong></li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Anniversaries</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Birthday</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Congratulations</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Romance</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Sympathy</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio">Valentine</label>
          </div>
        </li>
      </div>

      <div class="col-md-4">
        <li><strong>By Types</strong></li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Arrangements</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Baskets</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Bosquets</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Flower Board</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Hampers</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio">Native and Wild Flowers</label>
          </div>
        </li>
      </div>

      <div class="col-md-4">
        <li><strong>By Flowers</strong></li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Crysantemum</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Jasmine</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Lily</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Orchid</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Rose</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio">Tulip</label>
          </div>
        </li>
      </div>
    </div>
  </div>
</div>

can you help me please to make a vertical Line between by occassion and by types and between by types and by flowers?

Collectives™ on Stack Overflow

CSS for dropdown button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related