Bootstrap grid column size not applying to materialize styled dropdown - html

Question

I have the following example I'm working through (only using materialize because of the multiselect drop down, so if there's an equally as visually pleasing alternative, I'm all for that):
$(document).ready(function() {
$('.multiselect').material_select();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<style>
.input-field.col .dropdown-content [type="checkbox"]+label {
top: -10px;
}
</style>
<div class="container">
<div class="row">
<div class='input-field col-3'>
<select class='multiselect' multiple>
<option value="" disabled selected>Datacenter</option>
<option value="rs-iad">rs-iad</option>
<option value="rs-lhr">rs-lhr</option>
<option value="rs-ord">rs-ord</option>
<option value="unknown">unknown</option>
</select>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
Demo Here!
I'm trying to get the col-3 working, but it just spans the entire page still. Am I missing something?

Answer 1

According to your own code, you are using bootstrap 3.3:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
There is no such thing as col-3 in bootstrap 3.3.x Grid. In 3.3 you should be using col-xs-3.
You are also missing the actual bootstrap CSS file.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='input-field col-xs-3'>
col-3 only exists in Bootstrap 4 (beta as of this writing).
$(document).ready(function() {
$('.multiselect').material_select();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<style>
.input-field.col .dropdown-content [type="checkbox"]+label {
top: -10px;
}
</style>
<div class="container">
<div class="row">
<div class='input-field col-xs-3'>
<select class='multiselect' multiple>
<option value="" disabled selected>Datacenter</option>
<option value="rs-iad">rs-iad</option>
<option value="rs-lhr">rs-lhr</option>
<option value="rs-ord">rs-ord</option>
<option value="unknown">unknown</option>
</select>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>