Bootstrap issue using col class

Question

I used the col class given by bootstrap in order to make my site responsive, but columns are not working and act as rows. I used columns method two times before and it always worked

I already searched on the web but couldn't find any working answer

here is my HTML code :

.h85 {
  height: 85vh;
}

.row {
  border-bottom: solid 2px black;
  border-top: solid 2px black;
  margin: 2vh;
}

[class*="col-"] {
  border-right: solid 2px greenyellow;
  border-left: solid 2px greenyellow;
}

.container {
  border: solid 3px red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container h85" id="journalier">journalier
  <div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-4" id="repas-journalier">5</div>
    <div class="col-lg-2" id="star">7</div>
    <div class="col-lg-4" id="sport-journalier">11</div>
    <div class="col-lg-1">12</div>
  </div>
</div>

As an output I got this, which is not what I attempted

thanks for the help

Answer 1

Try This:

.h85 {
  height: 85vh;
}

.row {
  border-bottom: solid 2px black;
  border-top: solid 2px black;
  margin: 2vh;
}

[class*="col-"] {
  border-right: solid 2px greenyellow;
  border-left: solid 2px greenyellow;
}

.container {
  border: solid 3px red;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link  rel="stylesheet"  href="accueil.css">
<div class="container h85" id="journalier">journalier
  <div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-4" id="repas-journalier">5</div>
    <div class="col-lg-2" id="star">7</div>
    <div class="col-lg-4" id="sport-journalier">11</div>
    <div class="col-lg-1">12</div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Try full screen.

Answer 2

I think you need to use all breakpoints.

Try for medium resolutions:

<div class="row">
      <div class="col-lg-1 col-md-1">1</div>
      <div class="col-lg-4 col-md-4" id="repas-journalier">5</div>
      <div class="col-lg-2 col-md-2" id="star">7</div>
      <div class="col-lg-4 col-md-4" id="sport-journalier">11</div>
      <div class="col-lg-1 col-md-1">12</div>
</div>

Then you need to add col-lg-1 col-md-1 col-sm-1 or col-1 for all the breakpoints if you use bootstrap 4.

Answer 3

Your code seems to work, but the columns breakpoint will be applied only for screens with at least 1200px, because you are using col-lg-. For reference:

Bootstrap 4
Extra small (col-) < 576px
Small (col-sm-) ≥ 576px
Medium (col-md-) ≥ 768px
Large (col-lg-) ≥ 992px
Extra large (col-xs-) ≥ 1200px

Bootstrap 3
Extra small (col-xs-) < 768px
Small devices (col-sm-) ≥ 768px
Medium devices (col-md-) ≥ 992px
Large devices (col-lg-) ≥ 1200px

Answer 4

I doubt you did import bootstrap.css the wrong way, you can check the path again.

But here is the quick solution:

.row{
   border-bottom: solid 2px black;
   border-top: solid 2px black;
   margin: 2vh;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: cennter;
   flex-wrap: unset;
}