[SOLVED] Bootstrap is not performing as expected

HTML-CSS
1

Bootstrap is not performing as expected in medium and small size screen.

I’m setting up a Grid for working in different styles, for large, medium and small screen sizes. The code is working fine for large screen size but when turned to medium or small works as a default Bootstrap style.

I don’t know where is the mistake if it is from me or there’s another syntax for the newest Bootstrap version.

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6" style="background: yellow; border: 1px solid red;">
        col
    </div>
     <div class="col-lg-3 col-md-4 col-sm-6" style="background: yellow; border: 1px solid red;">
        col
    </div>
     <div class="col-lg-3 col-md-4 col-sm-6" style="background: yellow; border: 1px solid red;">
        col
    </div>
     <div class="col-lg-3 col-md-4 col-sm-6" style="background: yellow; border: 1px solid red;">
        col
    </div>
     <div class="col-lg-3 col-md-4 col-sm-6" style="background: yellow; border: 1px solid red;">
        col
    </div>
     <div class="col-lg-3 col-md-4 col-sm-6" style="background: yellow; border: 1px solid red;">
        col
    </div>
</div>

new
new1920×897 65.7 KB

2

When I clicked on the link, it took me to an error page that said “oops, that doesn’t exist or is private”.

4

@lucassorenson
I fixed the pic, I’m trying to show up three columns on medium size screens and two columns in small screens, but it is not working.

5

Is there any screen-width that makes it into 2 columns? If so, then it might be turning into 1 column when it hits the breakpoint for extra-small screens (xs). You may just have to add col-xs-6 to each div.

6

Still the same, it is responsive but not as I would like. Im not using any CSS, just the Get Started model link from bootstrap.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6" style="background: yellow; border: 1px solid red;">
      col
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6" style="background: yellow; border: 1px solid red;">
      col
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6" style="background: yellow; border: 1px solid red;">
      col
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6" style="background: yellow; border: 1px solid red;">
      col
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6" style="background: yellow; border: 1px solid red;">
      col
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6" style="background: yellow; border: 1px solid red;">
      col
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

Annotation 2020-01-16 235849
Annotation 2020-01-16 235849835×503 23.9 KB

7

@lucassorenson I guess it is working fine now, the problem was my screen size, it is very wide. So, when I squeeze the window width entirely, it gets smaller then a standard mobile sizes.