Estoy practicando con bootstrap
y resulta que deseo modificar el height
de un container-fluid
, aplico las reglas en css
, pero no puedo cambiar el tamaño, esto es lo que llevo:
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
/* Backgrounds */
#background-head {
background: #000000;
}
/*Cambio de tamaño a los container*/
.container-fluid {
max-height: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example1</title>
<meta chartset="Utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sheetStyle.css">
</head>
<body>
<div class="container-fluid" id="background-head">
<div class="row">
<header>
<h1>Hello</h1>
</header>
<!-- header -->
</div>
</div>
<section>
<article></article>
</section>
<footer>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>
</html>
No se porque no se aplica la regla de altura al container.