List grid and list view with bootstrap 4

Navigation
1

I wonder if I can do this effect that clicks on the icon above and the thumbnail switch mode list for mogo grid with the bootstrap 4 I'm worrying on the internet some example ready more just think of the bootstrap 3

    
asked by anonymous 22.05.2018 / 22:02

1 answer

1

Bootstrap 4 default Grid is in Flex , so you can switch between row and column using native BS4 classes and fewer CSS lines.

As jQuery tb is BS4 standard I used it myself to make a toggleClass by adding and removing the flex-column class (original BS4 class) and toggle between row and column , but tb I needed to set flex:1 for the grid to be adjusted and responsive without problems. (in fact this is the only style you need, the rest of the CSS only made you see the grid better) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    div[class^="col"] {
        height: 50px;
        box-sizing: border-box;
        border: 1px solid green;
        flex: 1;
    }
.coluna {
    flex-direction: column;
}

</style>
</head>
<body>
    <button>coluna/linha</button>
    <div class="container">
        <div id="colunaX" class="row flex-column">
          <div class="col-xs-2">
            1 of 2
          </div>
          <div class="col-xs-2">
            2 of 2
          </div>
          <div class="col-xs-2">
            2 of 2
          </div>
          <div class="col-xs-2">
            2 of 2
          </div>
          <div class="col-xs-2">
            2 of 2
          </div>
          <div class="col-xs-2">
            2 of 2
          </div>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

    <script>
    $("button").click(function(){
        $("#colunaX").toggleClass("flex-column");
    });
    </script>
</body>
</html>
    
22.05.2018 / 22:20
Mvc List only available and not occupied rooms Clear Html Tags from a result of an input, except