Bootstrap 4 dropdown with full width in Mobile - css

Question

I'm trying to have a dropdown with full screen in mobile view. This is not the navbar dropdown but a regular dropdown.
JSFIDDLE: https://jsfiddle.net/rg695Lqs/
#media (max-width: 767px) {
.dropdown-menu {
right: 0;
width: 100%;
}
.dropdown {
position: static;
}
}
<div class="container">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</div>

Answer 1

Option 1 the dropdown is contained in the col-10. You could use col-md-10 instead so that the containing col is full-width on mobile? (no extra CSS changes)
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
https://jsfiddle.net/3jq0ozfs/
Option 2 is to position:static the containers (dropdown & col-10). This will keep the col-2 and col-10 the same. (no extra CSS changes)
<div class="row">
<div class="col-2"></div>
<div class="col-10 position-static">
<div class="dropdown position-static">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu ml-1">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
https://jsfiddle.net/xsv1d6u5/1/

Answer 2

You can try this.. I have just changed the dropdown menu to follow fixed position, Such that It will follow device screen's margin's as it is parent and it will cover up the entire width of the mobile screen..
.dropdown-menu {
right: 0 !important;
left:0 !important;
position:fixed !important;
transform:none !important; }
https://jsfiddle.net/rg695Lqs/7/

Answer 3

With fullwidth, if you meant 100% width of the screen, you'll have to make some changes in HTML too.
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
Notice that I just changed the col-* classes to col-md-*.
This will make sure that the columns are of their respective size until medium size(Tablets 768px and Up) and of full width on devices below that (col-12 by default).
Also in CSS, following code will do:
#media (max-width: 767px) {
.dropdown-menu {
right: 0;
width: 100%;
}
.dropdown{
position: relative;
}
.dropdown button {
width: 100%;
}
}
Just by making .dropdown as relative, we are instructing the children of this element to stay inside it. And adding a 100% width to the button inside .dropdown will make sure it's 100% in width.
#media (max-width: 767px) {
.dropdown-menu {
right: 0;
width: 100%;
}
.dropdown{
position: relative;
}
.dropdown button {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>