Home / Questions / 4992
Accepted
julian salas
Asked: 2020-03-01 14:35:27 +0800 CST 2020-03-01 14:35:27 +0800 CST

Resize a container in bootstrap

  • 772

I'm practicing with bootstrapand it turns out that I want to modify the size heightof a container-fluid, I apply the rules in css, but I can't change the size, this is what I have:

@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>

I don't know why the height rule is not applied to the container.

html

3 Answers

  1. Best Answer

    The problem is that you are using max-heightinstead of height.

    What max-height:200pxyou're doing is telling the browser that the container should have a maximum height of 200px, but you're not instructing the browser on what height you want, which can be anything as long as it's less than 200px. If you use height:200pxthen you are telling the browser that the container must be exactly 200 pixels high.

    Here is the code with the change, now the container does have a height of 200:

    @charset "UTF-8";
 * {
  padding: 0;
  margin: 0;
}
/* Backgrounds */

#background-head {
  background: #000000;
}
/*Cambio de tamaño a los container*/

.container-fluid {
  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>

    • 6

  2. Apply the !important:

    .container-fluid{
 max-height: 200px !important;
}
    • 0

  3. It doesn't make much sense to modify the size of a container-fluid, it is made to occupy the whole block, if you want to modify the width you must use the class containerwith a width....

    As for the height, you should indicate a size only with height.. The ideal is not to touch the classes of Bootstrapbecause they are usually reused, you could add one divwith class or ideg. content or general and to that give it the dimensions you want..

    On the other hand, sometimes it may not let you modify classes of Bootstrap, you usually solve it by adding !importantto the value you change... But again, the ideal is not to modify the classes of Bootstrapand if you need something specific, do it inside one divand give it the styles that wish...

    • 0