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>
Related
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>
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>
I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps
I am working on a design for a website and practicing bootstrap in the meantime, so I am rather new to it. Now, I understand the grid division into 12 columns and then layering of elements into multiple rows and separating by column span. The question I have is how can I handle elements that span multiple rows next to the elements that span less.
Desired Layout Example
Now, on this example image, how would I accomplish the stacking of the 3 x 4 and the 3x2 and 3x3 blocks? Also, the elements shouldn't be resized vertically.
Since I am relatively new to Bootstrap and responsive design in general, I am open for other frameworks and/or workarounds.
Something like this needs quite a lot of nested containers to get your desired effect but it is all possible.
The heights of some of the elements is a little bit off but once content is filled out, it should look fine.
Below is a working example
div {
border: 1px solid #000;
box-sizing: border-box;
}
div div {
border: 1px solid #444;
}
div div div {
border: 1px solid #888;
}
div div div div {
border: 1px solid #bbb;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
3x2
</div>
<div class="row">
3x3
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-4">
3x4
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-12">
6
</div>
<div class="col-xs-12">
6
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Something like below. It is not complete HTML, but it can give you an idea as to how you can use the horizontal and vertical bootstrap grids (basically through nesting):
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class='container'>
<div class='row'>
<div class='form-horizontal'>
<!--First Row-->
<div class='form-group'>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
</div>
<!--Second Row-->
<div class='form-group'>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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/