bootstrap or grid-template

Question

bootstrap or grid-template

Asked 7 years ago

Viewed 451 times

3

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

I have this doubt because when looking at the websites that used Bootstrap the code gets checked 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 nor need for class

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

With flex-box n 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 you use grid-template is to use flexbox together with him. Masss... there are problems in Bootstrap 'polluting' the code with so many classes? Is it worth using Bootstrap because he’s ready, but filling html with classes, or it’s worth using grid-template + flexbox (giving a little more work) but not filling so many classes?

actually has no problem using bootstrap, I know programmers who use both bootstrap, when some who create their style manually. So it varies according to what you intend to do, and what will suit your needs, bootstrap makes many things easier, due to having many classes that are useful for various subjects. I particularly use bootstrap and find it super easy to actually work with it, and I don’t think it pollutes the code. On the contrary, I can style a table, quickly create a screen, and when you get the bootstrap you’ll see how simple it is

– user92870

2017/11/06 at 22:52

1 answer

Browser other questions tagged css bootstrap grid flexbox

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

by Victor • **1,539** points · Answer 1 · 2017-11-06T23:12:43+00:00

Using Bootstrap you optimize your time saving you from having to change either CSS or creating CSS styles, unlike Grid-Template, I’ll 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 don’t have to use class this you are correct, but think of the time it would take to create this css on top of these tags, which would increase your time. Bootstrap even using several classes, I do not see it as a 'code polluter' as mentioned in the question, so I will try to show a difference from boostrap below, the ease with which you separate things, using the existing classes themselves. Sure it’s a different example, but also see the ease of just putting the bootstrap link in my code and this already makes it not necessary for me to download the folder or any file, making it possible for me to work with Bootstrap only by inserting these links that are created within the tag <head>

<!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>
  <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 to have helped and shown perhaps a little difference, to give you a north