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?
Related
What I want to achieve is that my DIV element is not cut off by the Print option. I have used the code BREAK-INSIDE: AVOID code and it doesn't work, in the end my DIV ends up sliced in half.
HTML
<block-ui></block-ui>
<div class="content-wrapper container-xxl p-0">
<div class="content-body">
<div class="card">
<div class="row">
<div class="col-xl-9 col-md-8 col-12">
<div class="row m-1">
<div class="m-1 dont-break" *ngFor="let QRID of printData.results">
<div class="d-flex align-items-center flex-column"
style="width: 4.5cm; height: 8cm; max-width: 4.5cm; border: 1px dashed #000000; padding: .25cm;">
<h6 class="mb-0" style="font-size: 10px;">Name:</h6>
<h6 class="mb-30">{{ QRID.proyecto }}</h6>
<img [src]="QRID.foto" style="height: 3.5cm; width: 3.5cm; margin-bottom: 7px;">
<ngx-qrcode-styling [config]="config" [type]="'canvas'" [shape]="'square'" [width]="110" [height]="110"
[margin]="0" [data]="QRID.qr">
</ngx-qrcode-styling>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-4 col-12 invoice-actions mt-md-0 mt-2">
<div class="card">
<div class="card-body">
<a class="btn btn-outline-secondary btn-block mb-75" href="javascript:window.print();" rippleEffect>
Print
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#media print {
div.dont-break {
break-inside: avoid !important;
page-break-inside: avoid !important;
-webkit-break-inside: avoid !important;
}
}
I have a row of 3 different columns which change sizes depending on the screen size. However, when I shrink the screen, I want the margin to change only for a certain number of boxes. For example, this is what it looks like when there is no margin on the left or right.
XL Screen
This is what it looks like when I scale down the screen size with no margin.
L Screen
However, when I change the margin to "mr-4", the boxes do not scale down the same way. Here is how it looks with margin on the first and second boxes.
XL Screen
L Screen
This is the html I'm working with
.cram-set-header{
color: #042157;
margin-bottom: 9px;
}
.cram-set{
background-color: #ffffff;
height: 120px;
padding-top: 32px;
border-radius: 5px;
box-shadow: 0px 3px 6px #CBCBCB;
padding-left: 28px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="subject-container" class="container-fluid">
<div class="row">
<div class="col-2">
</div>
<div class="col-8">
<div class="row">
<div class="row pt-1">
<h3 id="subject-text">My Sets</h3>
<span class="num-cram-sets pt-1 ml-2">- 8 Cram Sets</span>
</div>
<div class="row ml-auto">
<div class="col-8 pr-0 pb-3">
<button class="btn" id="sign-up-button" data-toggle="modal" data-target="#uploadModal">Upload</button>
</div>
</div>
</div>
<div class="row">
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3 mr-4">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
</body>
I want to be able to mantain the margin between boxes when the screen size is minimized. I thought about creating a class and then using media queries to change the margin depending on screen size, but I need every box to have margin at some point.
For example, in the XL screen size, I do not want right margin on the box on the right because I want it to be flush with the end of the column.
https://repl.it/join/tgbodxoh-claytonhorning
To solve that I suggest you use flex-wrap: wrap. I add some classes to your HTML and fixed the problem. I hope you like it.
For the XL screen, I made row-container flex-wrap: nowrap because otherwise, it will send the box to the next line earlier.
.row-container {
display:flex;
flex:0 0 100%;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
}
.cram-set-header{
color: #042157;
margin-bottom: 9px;
}
.cram-set{
flex-basis:25%;
background-color: #ffffff;
height: 120px;
padding-top: 32px;
border-radius: 5px;
box-shadow: 0px 3px 6px #CBCBCB;
padding-left: 28px;
margin:10px;
}
.row-header {
display:flex;
flex-direction:row;
flex:0 0 100%;
}
.row-header .row.pt-1 {
flex-basis:50%;
margin:10px;
}
.row-header .row.ml-auto {
display:flex;
justify-content:flex-end;
flex-basis:50%;
margin:30px;
}
#media screen and (max-width:991px){
.row-container {
flex-wrap:wrap;
}
}
<body>
<div id="subject-container" class="container-fluid">
<div class="row">
<div class="col-2">
</div>
<div class="col-8">
<div class="row row-header">
<div class="row pt-1">
<h3 id="subject-text">My Sets</h3>
<span class="num-cram-sets pt-1 ml-2">- 8 Cram Sets</span>
</div>
<div class="row ml-auto">
<div class="col-8 pr-0 pb-3">
<button class="btn" id="sign-up-button" data-toggle="modal" data-target="#uploadModal">Upload</button>
</div>
</div>
</div>
<div class="row row-container">
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3 mr-4">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set mb-3">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 cram-set">
<h5 class="cram-set-header mb-0">Marketing - Cram Set #1</h5>
<div class="row pl-3">
<p class="mr-1">5.0</p>
<img src="img/star-rating.png" alt="" height="16px">
<p class="ml-2">1,034 Questions</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
</body>
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>
I'm trying to make a row responsive in a way that mobile rows go vertically instead of horizontal and I still have all those fancy boxes, could anyone help me in any way?
I already tried changing the columns up, css-flexbox, but I'm most likely just doing something horribly wrong.
#caixas {
background-color: #58373791;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
padding-left: 25px;
}
#caixas2 {
background-color: #b6696a91;
padding-top: 5px;
padding-right: 30px;
padding-left: 25px;
padding-bottom: 5px;
}
#border {
border: solid 3px red;
}
<div class='col-lg-12 col-md-12 col-sm-12'>
<div id="border" class="container">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Português</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Portuguese Student</h3>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Internacional</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Internacional Student</h3>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Intercâmbio</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Exchange Student</h3>
</div>
</div>
</div>
</div>
</div>
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