my bootstrap dropdown reason near full width , need be.
here image of im talking about:
the country , city bootstrap dropdowns have styled rather lot change look. each inside container row. each take 6 columns split in half. want them take full half of green bit. here code.
html:
<div id="find-vegan-products-page" style="height:900px;"> <div class="form-background"> <div class="container-fluid" style="padding: 40px;"> <h1>filter search!</h1> <form role="form"> <div class="row"> <div class="form-group col-sm-6"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">country </button> <ul class="dropdown-menu"> <li><a href="#">html</a> </li> <li><a href="#">css</a> </li> <li><a href="#">javascript</a> </li> </ul> </div> </div> <div class="form-group col-sm-6"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">city </button> <ul class="dropdown-menu"> <li><a href="#">html</a> </li> <li><a href="#">css</a> </li> <li><a href="#">javascript</a> </li> </ul> </div> </div> </div> </form> </div> </div> css:
.input-control { height: 5rem; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom: 1px solid dimgray; border-left-style: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } button.input-control:hover { background-color: none; background: none; } .btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary { /* color: #fff; */ background-color: transparent; border-color: transparent; } .btn:focus, .btn:active { outline: none !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; background-color: transparent; border-color: dimgray; box-shadow: none; } .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { color: #fff; background-color: transparent; border-color: dimgray; } .btn { font-weight: 100; } .btn-primary:hover { color: #fff; background-color: transparent; border-color: dimgray; } dropdown > button { background:none; border:none; box-shadow:none; } .form-background { background: rgba(149, 246, 102, .5); } #find-vegan-products-page { margin-top: 100px; /*separate div top of page*/ padding: 100px; /*or whatever value give div space */ } .btn.btn-default:focus { border:none; outline:0; } .form-control::-webkit-input-placeholder { /* webkit, blink, edge */ color: white; font-weight: 100; } .form-control:-moz-placeholder { /* mozilla firefox 4 18 */ color: white; opacity: 1; font-weight: 100; } .form-control::-moz-placeholder { /* mozilla firefox 19+ */ color: white; opacity: 1; font-weight: 100; } .form-control:-ms-input-placeholder { /* internet explorer 10-11 */ color: white; font-weight: 100; } .form-control:placeholder-shown { /* standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: white; font-weight: 100; } how make bootstrap dropdowns take full 6 columns in bootstrap container? thing different bottom border go full width of 6 container columns.
i did following:
.input-control { border:none; /* remove border bottom */ } .dropdown, .dropup { border-bottom: 1px solid #696969; /* add bottom border drop down instead */ } .dropdown-menu { width:100%; /* make drop down 100% width optional */ } i put optional 100% width on drop down menu incase wanted border match.
update:
having button full width usability well.
.input-control { width:100%; text-align:left; } 
Comments
Post a Comment