Menu
Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.
My HTML Code below is used to list a content:
<div class="list"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div> <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div> </div> </div> The CSS Code for the list. All other CSS is taken by bootstrap:
.styled_view div.list { padding: 0; width: 100%; } The same code should be used to show grid:
<div class="grid"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div> <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div> </div> </div> The CSS for the grid:
.styled_view div.grid { display: inline-block; overflow: hidden; vertical-align: top; width: 19.4%; } The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?
962
Set size and make inline Because they're block elements, when reducing the size of Div one to make room for the other div, you're left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.
First, we will create a basic HTML code for the div elements and apply different CSS styling to make it display inline. CSS properties: In this article, we will use below CSS properties. Display: We will use display: flex and display: inline-block property to show div elements inline.
<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return).
There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.
Do a row div.
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <div class="grid"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div> <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div> </div> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div> </div> </div>If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove other classes so it will always take a full row.
This is a copy of your code corrected so that last div always occupy a full row (I although removed unnecessary classes).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div class="grid"> <div class="row"> <div class="col-sm-3">Under me should be a DIV</div> <div class="col-md-6 col-sm-5">Under me should be a DIV</div> <div class="col-xl-12">I am the last DIV and I always take a full row for my self!!</div> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
