Custom Bootstrap grid rows and cols - css

I am beginner in bootstrap, how to get this layout in bootstrap 4 grid? I do not see the areas marked in red
So far i have tried the below
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>


Hope this helps -:
<div class="container">
<div class="row green" style="height: 50px;"></div>
<div class="row">
<div class="col-sm-6 red" style="height: 100px;"></div>
<div class="col-sm-6">
<div class="row yellow" style="height: 50px;">
</div>
<div class="row blue" style="height: 50px;">
</div>
</div>
</div>
</div>
<style>
.green{
background: green;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
.blue{
background: blue;
}
</style>

Related

Newspaper-style div alignment with flex-wrap, overflow, without fixed container size

I am currently working on an issue with regards to HTML+CSS and reaching the limits on what I know is possible. Here is the issue:
https://jsfiddle.net/jwco2sd8/1/
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
overflow-y: auto;
}
.item {
width: 10em;
height: 2em;
margin: 0.1em;
background-color: red;
}
.item:nth-child(3n+2) {
background-color: lightgreen;
}
.item:nth-child(3n+3) {
background-color: blue;
}
<html>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item">42</div>
<div class="item">43</div>
<div class="item">44</div>
<div class="item">45</div>
<div class="item">46</div>
<div class="item">47</div>
<div class="item">48</div>
<div class="item">49</div>
<div class="item">50</div>
</div>
</body>
</html>
I want to achieve a newspaper-style ordering of the divs in the example linked. That means that the primary ordering of the items should be "column", but if there is horizontal space, instead of overflowing vertically, items should first be distributed horizontally first - and then if there is not enough space overflow vertically. I want the container to resize dynamically with the browser window, so I cannot set a constant width or height of the container item.
Adding a 'max-height: 25em' to the .container div, simulates what I want to achieve (on my screen):
Is there a way to achieve the desired effect with just HTML/CSS but without media-queries and JavaScript code. I pretty much understand why what I am doing is not working, but I do not know if there are alternatives.
I added a little bit of JavaScript now to do the necessary "space-left" computations and set max-height from there, but I still feel that a pure CSS+HTML solution should work and would be nicer. Are there any other ways that to accomplish this?

This is the job of columns where you only define the column-width and you keep the column-count auto
.container {
column-width:10em;
}
.item {
width: 10em;
display:inline-block;
height: 2em;
margin: 0.1em;
background-color: red;
}
.item:nth-child(3n+2) {
background-color: lightgreen;
}
.item:nth-child(3n+3) {
background-color: blue;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item">42</div>
<div class="item">43</div>
<div class="item">44</div>
<div class="item">45</div>
<div class="item">46</div>
<div class="item">47</div>
<div class="item">48</div>
<div class="item">49</div>
<div class="item">50</div>
</div>

Bootstrap creating a row with 4 boxes

Hi guys I'm using bootstrap 3 and trying to crate this effect here :
However i cant seem to create this using bootstrap at all Mine keep lying under each other, Any help on recreating this format would be great
HTML:
<div id="night">
<div class="container">
<div class="row">
<div class="col-xs-3 col-md-6 first">
<p>a</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
<div class="col-xs-3 col-md-3 first">
<p>a</p>
</div>
</div>
</div>
</div>
css:
.first {
border-style: solid;
border-color: red;
}
Thanks

Try this please
<div id="night">
<div class="container">
<div class="row">
<div class="col-md-4 first">
<div class="second">a</div>
</div>
<div class="col-md-4 first">
<div class="third">a</div>
<div class="third">a</div>
</div>
<div class="col-md-4 first">
<div class="third">a</div>
<div class="third">a</div>
</div>
</div>
</div>
</div>
CSS:
.first {
border-style: solid;
border-color: red;
}
.second {
border-style: solid;
border-color: blue;
display: block;
height: 400px;
}
.third {
border-style: solid;
border-color: blue;
display: block;
height: 200px;
}

This works in full page, maybe you can work with this aproximation:
<div class="container">
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
1
</div>
<div class="col-sm-8" style="background-color:pink;">
<div class="row">
<div class="col-sm-6" style="background-color:blue;">
2
</div>
<div class="col-sm-6" style="background-color:red;">
3
</div>
<div class="col-sm-6" style="background-color:green;">
4
</div>
<div class="col-sm-6" style="background-color:black;">
5
</div>
</div>
</div>
</div>
</div>

How to strech the grid items in a Cartesian plane made with Bootstrap4 and Flex?

I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you

You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>

Why does nth-of-type() and nth-child() break with unrelated element

I am obviously missing something really fundamental but I have the following html
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
and am using the following selectors
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
Which I believe expresses 'select the nth child items of .text-cont where class contains .row and is either odd or even'.
Yet the <div class="md-margin"></div> break these selectors.
So I end up with
Instead of the alternating pattern I expect. The problem is resolved when I remove the md-margin divs. What am I missing?

it is because you have those md-margin divs in between, making them the even ones.
(althought :nth-of-type will show the result you want when using classes - depending on the markup -, but it refers to the element type, that's why div with md-margin are "counting" here.
snippet with md-margin
.test-cont .row:nth-of-type(4n+2) {
background: purple;
}
.test-cont .row:nth-of-type(4n+4) {
background: red;
}
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
Snippet without md-margin
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
<div class="test-cont">
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>

Div overlapping issue in bootstrap mobile version

I have a carousel, and 2 rows in bootstrap. The layout is fine in standard view but when it goes into mobile queries the page layout becomes messed up. The 2nd row seems to overlap the blue column and i am not sure why.
https://jsfiddle.net/ydcategd/
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>

You should target mobile devices first if you want mobile responsiveness
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-xs-4 one">
<p>123</p>
</div>
<div class="col-xs-4 two">
<p>456</p>
</div>
<div class="col-xs-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
</div>
Based on your updates check this fiddle

Here is your fix:
HTML:
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
CSS:
html, body{
height: 100%;
}
.carousel, .item, .active, .carousel-inner{
height: 100%;
}
.item>div{
width: 100%;
height: 100%;
}
.item:nth-child(1) > div {
background-color: yellow;
}
.box{
width: 100%;
height: 100%;
position:absolute;
top:100%;
}
#triple{
height: auto;
}
.col-lg-4 {
height:100%;
}
.one, .two, .three{height: 50vh;}
.one{ background-color:red;}
.two{ background-color:blue;}
.three{ background-color:green;}
.four{ background-color:orange;}
#single{
height:50%;
border:1px solid black;
}
#media (max-width: 767px){
.one, .two, .three{height: 100vh;}
}
Fiddle: https://jsfiddle.net/vsk59tck/1/

Resources