css – bootstrap ou grid-template

Question:

Hey guys, I would like to know what is more recommended to use on a website: Bootstrap , Grid-template or flexbox .

I have this doubt because when I see the sites that used Bootstrap the code is full of classes

<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 you do n't even need a class

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

With flex-box you do n't need to specify as much…

<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 together with it. Masss… Are there problems with Bootstrap 'polluting' the code with so many classes? Is it worth using Bootstrap because it's ready, but filling the html with classes, or is it worth using grid-template + flexbox (giving a little more work) but not filling so many classes?

Answer:

Using Bootstrap you optimize your time saving you from having to change either the CSS or creating CSS styles, unlike the Grid-Template, I'll show you what I understand and the difference below

#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 don't have to use class, that's 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. While Bootstrap, even using different classes, I don't see it as a 'code polluter' as mentioned in the question, so I'll try to show a difference from boostrap below, the ease with which things are separated, using the existing classes themselves. Sure it's a different example, but also see how easy it is to just put the bootstrap link in my code and this means that I don't need to download the folder or any files, so I can work with Bootstrap just 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 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>
  <script src="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 maybe shown a little of the difference, to give you some direction

Scroll to Top