bootstrap sm resize not brakeing - html

So this is my HTML Code. (bootstrap css is in head included)
According to Bootstrap it should take for each col div on small screens 12 which is basically the full screen.
also it should hide the img with the .d-sm-none .d-md-block
but when iam doing the resize in chrome tools its not going well.
google coulndt help me so far. also tried removing flex class , dosent changed a thing
<body cz-shortcut-listen="true">
<div class="container-fluid">
<div class="row d-flex flex-wrap">
<div class="col-sm-12 col-md-6 col-lg-3 ">
<div class="card" style="width: 18rem;">
<img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Tower">
<div class="card-body">
<h5 class="card-title">Tower</h5>
<p class="card-text">City: dubay Zip-Code 4993
<br>
</p><p>Created: 1.2.2015, 05:40:00
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3 ">
<div class="card" style="width: 18rem;">
<img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Palme">
<div class="card-body">
<h5 class="card-title">Palme</h5>
<p class="card-text">City: Dubai Zip-Code 333
<br>
</p><p>Created: 1.2.2011, 05:40:00
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/2.jpg" alt="Mcdonald">
<div class="card-body">
<h5 class="card-title">Mcdonald fastfood</h5>
<p class="card-text">City: melbourn Zip-Code 4544
<br>
</p><p>
<label>Phone, Web</label>
<br>
+66 4895643312
<br>
www.getfat.com
</p><p>Created: 2.3.2020, 04:30:00
</p>
</div></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/2.jpg" alt="Burgerkin">
<div class="card-body">
<h5 class="card-title">Burgerkin fastfood</h5>
<p class="card-text">City: Switzerlan Zip-Code 4334
<br>
</p><p>
<label>Phone, Web</label>
<br>
+66 443543512
<br>
www.getfatter.com
</p><p>Created: 2.3.2011, 04:30:00
</p>
</div></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/3.jpg" alt="Eating Burger">
<div class="card-body">
<h5 class="card-title">Eating Burger</h5>
<p class="card-text">City: burgertown Zip-Code 4234
<br>
<label> Event Infos </label>
</p><ul>
<li>14. June. 2100</li>
<li>3 o clock</li>
<li>56</li>
<li>www.event.com</li>
</ul>
<p>Created: 1.2.2019, 03:25:00
</p>
</div></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/3.jpg" alt="Sky diving">
<div class="card-body">
<h5 class="card-title">Sky diving</h5>
<p class="card-text">City: skytown Zip-Code 4666
<br>
<label> Event Infos </label>
</p><ul>
<li>14. June. 2000</li>
<li>5 o clock</li>
<li>560</li>
<li>www.eve222nt.com</li>
</ul>
<p>Created: 1.2.2011, 03:25:00
</p>
</div></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


The d-sm-none is functioning correctly. You have it on the img tag and therefore in the breakpoints referenced in bootstraps documentation here you can see the sm breakpoint is actually for landscape phones and as such will only hide the img from 576px to 768px. If you were trying to target this on a regular vertical orientation on a phone than you can replace where you have d-sm-none d-md-block and replace it with .d-none .d-sm-block like so:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
<div class="card">
<img class="card-img-top d-none d-sm-block" src="img/1.jpg" alt="Palme">
<div class="card-body">
<h5 class="card-title">Palme</h5>
<p class="card-text">
City: Dubai Zip-Code 333
<br>
</p>
<p>HIDE ME</p>
<p>
Created: 1.2.2011, 05:40:00
</p>
</div>
</div>
</div>
</div>
You can see this here in dev tools when i set it to 576px and you see the img is visible with the PALME section saying HIDE ME which i added to mark the card you have the img you want to hide on.
And then here when we go to 575px you can see it disappear like its supposed to:
As far as your column div problem I am not sure I understand what you are asking but I do see what is wrong with your code. In bootstrap you must have the class container which you do and then inside goes a row (on each row there are 12 columns). Once a row is filled up you must create another row to put your content into which again can hold up to 12 columns.
How you have the code currently is 1 row inside of a container and then your cards which all have col 12 on it. Below is a demo of what I assume you were trying to do which is to have the cards span the whole screen from a small screen up till when you want them to take up half the screen which I see from you putting col-md-6.
I did the demo by removing the flex classes and also by removing the width of the card that you had set as 18rem. It now spans the whole screen as I also added in col-xs-12 to be full screen on vertical orientation phones since the lowest you had on your cards was col-sm-12 which as I said above only is the width of landscape orientation for phones.
Demo:https://jsfiddle.net/atcvmqLx/
Explanation: Youll see on there that even though the images arent attached that the cards themselves expand to be full screen until it hits the col-md-6 breakpoint # 768px.
Let me know if you have any questions!

Related

adjusting span value inside a col in bootstrap 4

I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.
I tried adding padding-top on the span text the same goes with the assigned col of the span text but the card beside it is adjusting as well. Can anyone help me with this one?
I want the numbering to be at the horizontal range of the card either at the top or at the middle, as you can see it's above the card.
<div class="container">
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-12">
<div class="card h-100" style="width: 15rem;">
<div>
<a class="fancybox" href="admin/files/Images/flutterfest.png">
<img class="card-img-top" src="admin/files/Images/flutterfest.png">
</a>
</div>
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>

give column classes as col-sm-2 and col-sm-10. there are 12 columns max you can create in bootstrap. So you have given col-sm-12 to second div thats why it is going to next line
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-10">

Can't figure out responsive cards in Bootstrap 4

I just built a new site from scratch using Bootstrap 4. I created a fluid container, then into that I inserted a Grid Row with 8 columns, and into each of these 8 columns I inserted a card with images.
Everything looked fine until I realized that it isn't responsive. In fact at xl the cards display at 4 in a row, but at lg the cards all stack vertically as if viewing on a phone.
Try as I might, I can't get the cards to be responsive no matter how much I play with the col classes.
Can someone help me to get this thing responsive? Basically I'd like the cards 4 across at xl (that's what they're doing now), 3 across at lg, and 2 across at md, sm, and xs. Again, right now it's displaying at 4 across at xl and only 1 across (stacking vertically) at all other sizes.
This is my first time here and hopefully after I type this I can include some code. Much appreciated.
Code example:
<div class="container-fluid">
<!--Image Grid-->
<div class="row">
<!--Real people Reel-->
<div class="col-xl-3">
<div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">Real People Reel</h5>
<p class="card-text text-open-sans">Your greatest and most credible asset.</p>
<br>
<br>
</div>
</div>
<!--End Real People Reel-->
<!--University Hospital Newark-->
<div class="col-xl-3">
<div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">University Hospital Newark</h5>
<p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
<br>
<br>
</div>
</div>
<!--End University Hospital Newark-->

I think each "item" in a row, insert responsive class to there like that.
<div class="container-fluid">
<!--Image Grid-->
<div class="row">
<!--Real people Reel-->
<div class="col-xl-3 col-lg-4 col-md-6"> <!-- add new class here -->
<div class="card"> <!-- remove class here -->
<img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">Real People Reel</h5>
<p class="card-text text-open-sans">Your greatest and most credible asset.</p>
</div>
</div>
<!--End Real People Reel-->
<!--University Hospital Newark-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">University Hospital Newark</h5>
<p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
</div>
</div>
</div>
<!--End University Hospital Newark-->
</div>
</div>
By the way, visit W3School for more information about Bootstrap 4 grid system
So I hope it can help you.

How to get two bootstrap cards side by side to act responsive using a media query?

Media Query for bootstrap 4, unresponsive. I have two cards side by side in a section. When I get down to 576px I want to be able to display the cards side by side.
I've tried setting the parent containers to float: none and float: left. Also tried incorporating display: block on the Query.
<section id="recipeList">
<div class="recipeName"></div>
<div class="row">
<div class="col-sm-6">
<div class="card image-container">
<img class="card-img-top" src="./assets/images/Dish.svg"
alt="places restaurants png">
<div class="card-body ingredients" id="foodImage">
<p class="card-text"></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ingredients-card">
<img class="card-img-top"
src="./assets/images/Contents.svg" alt="places restaurants png">
<div class="card-body overflow-auto">
<h2 class="card-title"></h2>
<p class="card-text overflow-auto" id="facts"></p>
</div>
</div>
</div>
</div>
</section>
I would love for the two bootstrap cards to be responsive rather than just squeezing downwards

How to center align row content within a container div using bootstrap?

I am doing an assignment for a Web Development course using css, html and bootstrap. I need to make a website and I am having some issues with the layout, I am using bootstrap cards (with images) within container and row div but the 3 cards in the row aren't aligned at the center of the col, there is some space left on the right side of the col as you can see in this screenshot.
This is my code:
<div class="container">
<div class="row ">
<div class="col-4">
<div class="card text-center " style="width: 18rem;">
<img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Canon EOS Rebel T7</h5>
<p class="card-text">Price : Rs. 37000.00</p>
Add to cart
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fujifilm X-T3</h5>
<p class="card-text">Price : Rs. 34000.00</p>
Add to cart
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Nikon D5600</h5>
<p class="card-text">Price : Rs. 43000.00</p>
Add to cart
</div>
</div>
</div>
</div>
</div>
I would like to know if there is any way to center align the card in the col div using css or bootstrap?
I would also like to know how to make all the card the same size (width and height) even if the images inside them are different sizes, as you can see in screenshot the last 2 cards are of different sizes because of the different image sizes.

To your first question:
Just use col-4 d-flex justify-content-center on your col definition.
By doing this, the card should be aligned in the middle of the col, see here.
Blue = container, purple = column, green = card.
Hope this works for you!

Section of website being cut off

Hi I have this portion of my website Link here to broken portion and for some reason, the bottom of one of my sections is cut off. If I add a different margin or padding to the main class I just get white area added and the bootstrap card still can't be read. Any ideas?
Picture:
HTML Code:
<div class="main">
<div class="page-header" id="Services" style="background-image: url('./assets/img/background-grassfade.png'); background-color:#fff;">
<div class="filter"></div>
<div class="container-fluid">
<div class="motto">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<div class="space-top"></div>
<h2 class="title">Services</h2>
</div>
<div class="container">
<div class="space-top"></div>
<div class="card" data-background="color" data-color="blue">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-car-mechanic"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Roadside Assistance</h4>
<p class="card-description">Jumpstarting, Tire changes, Fuel and fluid dilvery, Extrication/Pullout. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Delivery of non-alcoholic refreshments upon request for an additional charge.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="green">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-people-carry"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Hauling</h4>
<p class="card-description">Including Rock, Sand, Mulch, Dirt, Feed, Hay, Plants, Trees, Firewood, Applicances, etc. Moving Services, Junk/debris cleanup, small buisness deliveries, post garage sale deliveries. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Loading, transport and unloading covered.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="orange">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-home"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Exterior</h4>
<p class="card-description">Including Snow removal (driveways and sidewalks only currently) , Lawn care, Tree and Bush pruning/trimming, Stump removal, Leaf removal, Gutter cleaning, yard debris and junk removal, Landscaping, Power washing (Homes, Concrete, vehicles),
Window washing, Light construction demolition, Fence demolition. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="brown">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-toolbox"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Interior</h4>
<p class="card-description">Including Window washing, Batt insulation installation and removal, Drywall installation and removal, Indoor painting, Mild carpet and flooring cleanings, Maid services, Rearranging furniture, Drain cleaning, General home maintenance,
Baby proofing. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="yellow">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-shopping-basket"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Miscellaneous Services</h4>
<p class="card-description">Construction site clean up, Storm debris removal, Grocery pick up and delivery, vehicle hail dent repair, vehicle washing and detailing (we drive to you!), Dog walking, pet feces removal (outdoors only), Holiday lights/decoration installation.
Looking for something not on this list? Call for pricing/availability! </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The template is from Creative Tim: Creative Tim's Website and the CSS used is the included CSS with minimal changes and nothing that should touch any of this.
What I've tried:
Adding margin/margin-bottom to the main, container-fluid, motto and row as well as padding/padding-bottom
I have tried to change the margin-top of the section below it.
I have tried to add space using both <br /> and the provided space-top class.
I can include more of the HTML for the section below if needed. I included a link to the site currently, you should be able to use inspect element to sift around with grabbing CSS but I can include CSS if need be. I couldn't find anywhere that said I could not post a link to my page directly but if I cannot please let me know and I will remove it.

The page-header element inside paper-kit.css has a max-height:
.page-header {
max-height: 999px;
}
You content must be taller than that max-height (not sure why one would set a max-height on a div in a vertical layout but oh well). Comment it out in the web dev tools and all looks fine.

there is a max height of 999px in the class page-header, which is limiting the height remove it