bootstrap or grid-template

Question

bootstrap or grid-template

Navigation

#1 by (2 votes)

3

Flexbox , Grid-template , or flexbox . p>

I have this doubt because when you see the websites that used Bootstrap the code stays in class

<div class="row">
  <div class="col col-md-4"></div>
  <div class="col col-md-4"></div>
  <div class="col col-md-8"></div>
</div>

With grid-template neither need class

<div class="container">
  <header></header>
  <nav></nav>
  <footer></footer>
</div>

With flex-box n you need to specify both ...

<div class="container">
  <header>
    <div class="flexbox"></div>
    <div class="flexbox"></div>
  </header>
  <nav></nav>
  <footer></footer>
</div>

I've still been seeing that the normal when using grid-template is to use flexbox along with it. Masss ... Are there problems in the Bootstrap 'polluting' code in so many classes? It's worth using Bootstrap because it's ready, but filling the html of classes, or it's worth using grid-template + flexbox (giving a little more work) filling up with so many classes?

css grid bootstrap flexbox

asked by anonymous 06.11.2017 / 23:34

1 answer

Instantiate a class from its name in string How to convert java.util.Date to java.sql.Date keeping hours, minutes and seconds?

score 2 · Accepted Answer

Using Bootstrap you optimize your time saving you from having to be changing both CSS or creating CSS styles, other than the Grid-Template, I will show below what I understand and the difference

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

<section id="page">
  <header>Cabeçalho</header>
  <nav>Navegador</nav>
  <main>Area</main>
  <footer>Rodapé</footer>
</section>

Note that you do not have to use this class you are correct, but think about the time it would take to create this css on top of these tags, a fact that would increase your time. Since Bootstrap even using several class, I do not see it as a 'code polluter' as I quoted in the question, so I'll try to show a difference from the boostrap below, the ease with which it separates things, using the existing classes themselves. Sure it's a different example, but see also the ease of just putting the bootstrap link in my code and this does not make it necessary for me to download the folder or any files, so that I can work with Bootstrap only inserting these links that are created inside the <head> tag

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">Está é uma primeira linha onde você poderia criar um input, select textares</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">Está é uma segunda linha onde você poderia criar um input, select textares</div>
    <div class="col-sm-4" style="background-color:lavender;">Está é uma terceira linha onde você poderia criar um input, select textares</div>
  </div>
</div>

</body>
</html>

I hope I have helped and shown maybe a little of the difference, to give you a north