Height of Row in bootstrap using percentage (%)

Asked

Viewed 4,381 times

0

How to change the height of the Row in the Bootstrap using percentage? I tried the property height so much on the CSS, how much in the HTML pure, and did not work.

In a nutshell, I want to have control over the height of the Row.

On the estate Height, I realized that if I inform pixel value ( px ) it works, but would like to use percentage ( % ), but using a percentage, the property is not recognised

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Bill Turner</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/estilo.css" rel="stylesheet" media="screen">  
    </head>   
    <style>
        .c{
            height: 50%;
            background-color:aquamarine;
        }
    </style>
    <body>
        <div class="container">

            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
        </div>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script> 
    </body>
</html>

inserir a descrição da imagem aqui

html css bootstrap front-end
  • 2

    You could put the code you’re having trouble with?

  • Usually bootstrap is the boss! So that you return to the domain of your styles always put the !important in its stylization. That’s when it comes to boostrap.

  • That’s not the case. I tried to use online styling, so it should override any external style

  • Instead of the height, try to increase the padding of .table th, td {}

  • !Import after format solves your problem!

  • 1

    Possible duplicate of Align height 3 Divs in a row - bootstrap

Show 1 more comment

2 answers

2


First let’s understand why !important does not work in this case.

The standard document size HTML and your body ( Body ) is auto, this size changes as elements are inserted into them, but it still has its automatic size.

console.log('Tamanho inicial: ' + $("body").height() + 'px');
console.log("Após 3 segundos ira criar um elemento.");

setTimeout(function() {
  var novoElemento = $("<div></div>").text("O tamanho do corpo mudou, confira o Log");
  $("body").append(novoElemento);
  console.log('Tamanho alterado para: ' + $("body").height() + 'px');
  console.log("Após 6 segundos ira criar outro elemento.");
  
  setTimeout(function() {
    var novoElemento = $("<div></div>").text("O tamanho do corpo mudou novamente, confira o Log");
    $("body").append(novoElemento);
    console.log('Tamanho alterado para: ' + $("body").height() + 'px');
  }, 6000);
  
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

For it to work with percentage you must do the following.

  1. Set the document size HTML

    html {
    height: 100%;
}

  2. Set the size of Body and the selector .container

    body, .container {
    height: 100%;
}

  3. Set the size of the selector .row

    .row {
    height: 50%;
}

See working

html {
  height: 100%;
}
body, .container {
  height: 100%;
}

.row {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  height: 48%;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
  </div>
  <div class="row">
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
  </div>
</div>

1

You must change the value of line-height: i put 2.0 but you need to adjust this in custom css (custom.css I refer to your css file) and insert the attribute !important to subscribe to the bootstrap. 

.c{
                        background-color:aquamarine;
                        line-height:2.0 !important;
        }
<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="container">

            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
        </div>

Browser other questions tagged html css bootstrap front-end

You are not signed in. Login or sign up in order to post.