I implemented markup code and got desired layout in large screens, but on reducing size of screen to the phone level I need layout like image-3 and in big screen like laptops it should be like image-1. Image-1,Image-3 refer to single image that i have linked.
I am using Bootstrap-4, html-5
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<h6>Image-1 in large screens like laptop</h6>
<div class="row">
<div class="col-sm-8 ">
<div class=" card">
<button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
</div>
</div>
<div class="col-sm-4">
<div class="card"><button class="bg-danger" style="padding: 10%; font-size: 15px">oneSmall</button></div>
<div class="card"><button class="bg-danger" style="padding: 10%; font-size: 15px">oneSmall</button></div>
</div>
</div>
</div>
<!-- In order to fulfil desired layoutin small screens, i implemented this-->
<div class="container-fluid">
<h6>Image-2 after i made changes to get layout like Image-3,but in large screen it looks</h6>
<div class="row">
<div class="col-sm-8 col-12 ">
<div class=" card">
<button class="bg-dark" style="padding: 15%; font-size: 15px">bigone</button>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="card col-6"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
<div class="card col-6"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<h6>Image-3, like this i need to get in phone's screen, or smaller devices</h6>
<div class="row">
<div class="col-12">
<div class=" card">
<button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
</div>
</div>
<div class="card col-6"><button class="bg-danger" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button></div>
<div class="card col-6"><button class="bg-danger" style="padding-left: 50%; padding-bottom: 10%;font-size: 15px; width: 100%">oneSmall</button></div>
</div>
</div>
Image that describes layout
Use the responsive grid classes to change the layout at the desired breakpoints.
For example, col-12 col-md-8 means 8 columns wide on md and larger, and 12 columns wide on md and smaller:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-8">
<div class=" card">
<button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
</div>
</div>
<div class="col-12 col-md-4">
<div class="row h-100">
<div class="col-6 col-md-12">
<div class="card h-100">
<button class="bg-danger h-100" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button>
</div>
</div>
<div class="col-6 col-md-12">
<div class="card h-100">
<button class="bg-danger h-100" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button>
</div>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/eTGcVjgAWH
Try with this code. Hope can help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-sm-12">
<div class="card">
<button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<div class="card"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
</div>
<div class="col-md-12 col-sm-6">
<div class="card"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
</div>
</div>
</div>
</div>
</div>
Related
I am newbie to Bootstrap and trying to create the 5 column grid system similar to Exiger, But it's not showing exactly like left and right gap.
I tried with the below code.
<div class="container" style="margin-top: 100px;">
<div class="row">
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-12">
<div class="row">
<div class="col-lg-12 ">
<div class="card">
<div class="card-body ">
<h5 class="card-title">IT'S ALL ABOUT THE HOW</h5>
<hr class="hrmargin_b_10">
<h5 class="card-title">IT'S ALL ABOUT THE HOW</h5>
<hr class="hrmargin_b_10">
<p class="card-text">
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-12" style="text-align: center;">
<div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 1</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders align-content-center">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 2</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-12" style="text-align: center;">
<div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 1</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders align-content-center">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 2</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
and the result is below picture. I am trying to set the borders to the left and right of the boxes but it's not working properly.
Any help on this?
I created a bootstrap grid that has 3 rows with the following layout.
All I'm trying to do is add a bit of margin between them but as you can see, the columns and rows are not longer properly aligned.
Is there a way to fix it or maybe there's a better way to achieve what I want?
#featured {
margin-bottom: 15px;
}
.featured-1 {
height: 200px;
}
.featured-2 {
height: 50%;
margin-left: 5px;
}
.featured-3 {
height: 50%;
margin-left: 5px;
margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success">
Featured 3
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary">For reference</div>
</div>
</div>
The official bootstrap document recommended the use of Gutter.
you can do this like below:
.featured-1 {
height: 200px;
}
.featured-2, .featured-3 {
height: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5 px-4">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success gy-2">
Featured 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary gy-2">For reference</div>
</div>
</div>
There's already padding on the columns, which acts as gutters. I'd put the background on your column content instead.
#featured {
margin-bottom: 15px;
}
.featured-1>div {
height: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row" id="featured">
<div class="col-7 featured-1">
<div class="bg-warning">Featured 1</div>
</div>
<div class="col-5 d-flex flex-column">
<div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>
<div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-primary">For reference</div>
</div>
</div>
</div>
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
I am trying to create a 3 by 3 black and white grid. But instead only black square is showing. I have tried using Bootstrap.
My one square of the grid should cover 3 grids space as per bootstrap grid system and I am using padding-top:100% to maintain the aspect ratio for the squares in the 3 by 3 grid.
body {
margin: 0;
color: pink;
}
.square {
width: 100%;
padding-top: 100%;
background-color: black;
}
.square-w {
width: 100%;
padding-top: 100%;
background-color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="square"></div>
</div>
<div class=" col-md-3 ">
<div class="square-w"></div>
</div>
<div class=" col-md-3 ">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3 ">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
</div>
</div>
Your screen view might be too small.
Changing all the col-md-3 classes to col-sm-3 allows it to be shown on my view
JSFiddle: https://jsfiddle.net/2k5523ym/1/
You just need to put below code in css
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
and then assign nopadding class to every col-md-3 div
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
</div>
Hope this help you
How can I use the same height in row that keeps the site responsive? For example I have two x_panel with rows and columns inside but the height is different, i tried use display flex, but it change inside columns...
Here is a code to you understand what I'm trying to do:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel tile">
<div class="x_content">
<div class="row x_title">
<h3>Ponto de Venda:<small id="node_name"></small></h3>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-5 col-sm-5 col-xs-12">
<h5>Período de Avaliação:</h5>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span id="grafico_medias"></span> <b class="caret"></b>
</div>
</div>
</div>
</div>
<div class="row tile_count text-center">
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total de Pedestres</span>
<div id="displayPedestres" class="count"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-eye"></i> Visualizações</span>
<div id="displayInteracoes" class="count"></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
<span class="count_top"><i class="fa fa-refresh"></i> Taxa de Conversão</span>
<div id="displayTaxa" class="count green"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /Informacoes medias -->
<!-- Meta -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel tile">
<div class="x_content">
<div class="row x_title">
<h3>Meta</h3>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<h5>Meta do</h5>
</div>
<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
<select id="metaPeriodo" onchange="meta()" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
<option>dia</option>
<option>mês</option>
<option>trimestre</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<h5>em</h5>
</div>
<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
<select id="metaVariavel" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc" id="tipo_meta" onclick="meta()">
<option>pedestres</option>
<option>visualizações</option>
<option>taxa de conversão</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<input id="metaInput" type="text" class="form-control has-feedback" placeholder="Insira aqui a meta" style="height: 68px; font-size: 40px; font-weight: 600; color: #73879C; text-align: center">
</div>
</div>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="row">
<div class="sidebar-widget text-center">
<h4 style="text-align: center;">Cumprimento da Meta</h4>
<canvas width="140" height="80" id="foo" class="" style="width: 150px; height: 100px;"></canvas>
<div class="goal-wrapper" style="text-align: center;">
<span class="gauge-value pull-center"></span>
<span id="gauge-text" class="gauge-value pull-center"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Meta -->
</div>
I would like to "sync" this two columns with the same height doesn't matter the size of screen, can you help me?
EDIT
fiddle: https://jsfiddle.net/5nzcpj3s/
I am using Bootstrap with gentelella layout
https://jsfiddle.net/frd28kk0
I added new CSS classes just to make it easier to understand.
You have to play with the margins to get it better.
Your flexbox idea was fine. I guess you only missed setting .so-col-1 as display: flex; as well.
Boa sorte! =]
with flex-box and adding a single css class:
<div class="row flexit">...</div>
.flexit {
display:flex;
}
.flexit > div {
flex:1;
}
codepen example