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>
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;
}
}
In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>
Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col
I have an issue in responsive images in desktop the outcome is as expected but in any other device the last two grid item height is different than other grid item which is not as expected
It is supposed to have same height as rest of grid item The images are extracted from https://drive.google.com/uc?export=download&id=1gJ-g7EWreZu38DlaZltLDylPIBDHLSxX
The last two grid items i am talking about canopy and beach gateaway it should have same height as market and monument
.adventure-card {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
display: flex;
flex-wrap: wrap;
cursor: none;
align-content: space-around;
justify-content: right;
height: 80%;
}
.adventure-card img {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">
<!-- TODO: MODULE_ADVENTURES_GRID -->
<!-- 1. Create the grid of adventures by adding child elements as required. -->
<div class="row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<a href="resort/index.html">
<div class="adventure-card p-1 border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/resort.jpg" alt="resort.jpg">
</div>
<p>Resort</p>
<p>₹1200 </p>
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/tower.jpg" alt="tower.jpg">
</div>
<p>Tower</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/mount.jpg" alt="Skiing.jpg">
</div>
<p> Skiing</p>
<p>₹1,900 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/university.jpg" alt="university.jpg">
</div>
<p> University</p>
<p>₹800 </p>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/market.jpg" alt="market.jpg">
</div>
<p> Market</p>
<p>₹600 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/church.jpg" alt="monument.jpg">
</div>
<p> Monument</p>
<p>₹1,200 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/canopy.jpg" alt="canopy.jpg">
</div>
<p> Canopy</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/beachside.jpg" alt="canopy.jpg">
</div>
<p> Beach Gateaway</p>
<p>₹2,200 </p>
</div>
</div>
</div>
</div>
</div>
The images' you have mentioned size are different than the others so if you give them width and height %100 as custom CSS, they look different. That's why you can give them specific width and height to make equal instead of using percentage.
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
I'm trying to list side by side an anime list with images and name on a card, but the DIV ends and the image ignores and continues, how can I solve this?
URL: Here
Image: The image
css:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
min-width: 199px;
max-width: 200px;
float:left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left:5px;
margin-top:10px;
}
HTML:
<div class="container">
<div class="card">
<button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
<img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
<div class="container">
<h4><b>Black Clover</b>
</h4>
</div>
</div>
First of all, you're site's Bootstrap version is out of date with the HTML syntax you're using. Cards replaced panels from Bootstrap 3. You're using Bootstrap 3, view here which uses panels.
A lot of things changed between Bootstrap 3 and 4. I highly recommend you go with Bootstrap 4. Additionally, your HTML syntax doesn't line up with the traditional layout.
container > row > column > card
Here is a Codepen you can fork and play with.
Here is an example of what you need using Bootstrap 4.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
/* Custom CSS */
.text-strong {
font-weight: bold;
}
.card-body {
padding: .5rem;
}
.card-title {
margin: 0;
}
.card {
border: 2px dashed black;
box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}
.card:hover {
box-shadow: 0px 10px 20px rgba(60, 141, 188,0.5);
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js'></script>
<div class="container-fluid p-5">
<div class="row no-gutters">
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Bleach</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Black Clover</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Boku dake ga in...</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Dragon Ball Super</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Nanatsu no Taizai</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Naruto Shippuden</h5>
</div>
</div>
</div>
</div>
</div>