Problem with grid bootstrap

Question

Problem with grid bootstrap

Asked 7 years ago

Viewed 135 times

1

<! carousel-->
<div  class="container bg-danger">
<div class="row">
          <div class=".col-4 mt-3 mr-4">
        <div class="boxonee ">teste xd</div>

      </div>
 <div class=".col-4">
 <div id="carouselExampleCaptions" class="carousel slide mt-3 " data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleCaptions" data-slide-to="0" class=""></li>
                  <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
                  <li data-target="#carouselExampleCaptions" data-slide-to="2" class="active"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                  <div class="carousel-item">
                    <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="" src="images/sd1.png" data-holder-rendered="true"> 
                  </div>
                  <div class="carousel-item">
                    <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="" src="images/sd2.png" data-holder-rendered="true">
                  </div>
                  <div class="carousel-item active">
                    <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="" src="images/sd1.png" data-holder-rendered="true">
                  </div>
               </div> 
              </div>
  </div>
      <div class=".col-4">
        <div class="boxone mt-3 ml-4">teste 1</div>
        <div class="boxone  mt-3 ml-4">teste 2</div>
          <div class="boxone mt-3 ml-4">teste 2</div>
      </div>
</div>
</div>

css:

body {
    margin:0;
    padding:0;
    background:#e84118;
}

img.logo{
    width: 250px;
    height: 70px;
}
.prodf {
    display:flex
}
.form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
.minhaconta{
    margin-top: 10px;
}
.dropspc{
    background: #000;
}
/* actual dropdown animation */
.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu {
    max-height: 400px;
    background: #000;
    width: 200px;
    opacity: 1;
}
.boxone{
    width: 270px;
    height: 150px;
    background: #000;
}
.boxonee{
    width: 270px;
    height: 150px;
    background: #000;
}
/*import*/
.xd .carousel-item {
    overflow: hidden;
    width: 100%;
    height: 100%; /* aqui vc ajusta a altura do slider */
}
.xd .carousel-item img {
    width: 100%;
    /* transform: translateY(-50%)  habilitar se quiser pocicionar o meio da imagem no slider*/
}
/*import*/

I’m having this problem with these grid I’m trying to use ml-4 and the boxes are coming down.

Dude if you’re using some additional CSS also put in your answer to help you answer.

– hugocsl

2018/10/01 at 15:08
added, but the css had no nd of more

– Felipe

2018/10/01 at 15:11

1 answer

Browser other questions tagged html twitter-bootstrap bootstrap-4

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

by hugocsl • **65,517** points · Answer 1 · 2018-10-01T15:19:46+00:00

Dude you’re using the class name the wrong way, it’s not .col-4, you shouldn’t wear that . is just col-4

Another problem is that you’re using mr-4, This too is helping your grid to break... replace by pr-4 (mr = margin-right / pr = padding-right). You have to do the Responsive part of the Grid for small screens, determining how many columns the content will occupy for each screen size. Type col-6 col-md-4 this means that even medium screens takes up 4 columns (33.3% of the screen width), and on smaller screens this takes up 6 columns (50% of the screen width)

Here in the snipper does not look cool because the screen is very small, see how it looks:

OBS: It would be good to take a break in the development and take a look at the documentation of Grif https://getbootstrap.com/docs/4.0/layout/grid/, search tb on Youtube, there is a lot of material on how to understand the Grid and how it works! Once you understand this you will never have problem with these layout... Give a researched there that will help you too.

body {
      margin: 0;
      padding: 0;
      background: #e84118;
    }

    img.logo {
      width: 250px;
      height: 70px;
    }

    .prodf {
      display: flex
    }

    .form-control-borderless {
      border: none;
    }

    .form-control-borderless:hover,
    .form-control-borderless:active,
    .form-control-borderless:focus {
      border: none;
      outline: none;
      box-shadow: none;
    }

    .minhaconta {
      margin-top: 10px;
    }

    .dropspc {
      background: #000;
    }

    /* actual dropdown animation */
    .dropdown .dropdown-menu {
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

      max-height: 0;
      display: block;
      overflow: hidden;
      opacity: 0;
    }

    .dropdown.open .dropdown-menu {
      max-height: 400px;
      background: #000;
      width: 200px;
      opacity: 1;
    }

    .boxone {
      width: 270px;
      height: 150px;
      background: #000;
    }

    .boxonee {
      width: 270px;
      height: 150px;
      background: #000;
    }

    /*import*/
    .xd .carousel-item {
      overflow: hidden;
      width: 100%;
      height: 100%;
      /* aqui vc ajusta a altura do slider */
    }

    .xd .carousel-item img {
      width: 100%;
      /* transform: translateY(-50%)  habilitar se quiser pocicionar o meio da imagem no slider*/
    }

    /*import*/

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  

    

  <! carousel-->
  <div class="container bg-danger">
    <div class="row">
      <div class="col-4 mt-3 pr-4">
        <div class="boxonee ">teste xd</div>

      </div>
      <div class="col-4">
        <div id="carouselExampleCaptions" class="carousel slide mt-3 " data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class=""></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2" class="active"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item">
              <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide"
                alt="" src="https://placecage.com/100/100" data-holder-rendered="true">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide"
                alt="" src="https://placecage.com/100/100" data-holder-rendered="true">
            </div>
            <div class="carousel-item active">
              <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide"
                alt="" src="https://placecage.com/100/100" data-holder-rendered="true">
            </div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="boxone mt-3 ml-4">teste 1</div>
        <div class="boxone  mt-3 ml-4">teste 2</div>
        <div class="boxone mt-3 ml-4">teste 2</div>
      </div>
    </div>
  </div>