Cards Bootstrap 4 in one line - html

I'm trying to make my cards (panels) set next to each other and I'm using the templates at mdbootstrap.com.
My code:
<div class="row">
<div class="col-md-12">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
?>.</p>
</div>
</div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
?></p>
</div>
</div>
</div>
</div>
I tried to give it a class of d-inline but it's not working...
The cards I'm using https://mdbootstrap.com/components/panels/

Just in case someone is looking at this, an easy way to do it is to use the card-deck class. So, for example:
<div class=card-deck>
<!-- First Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
<!-- Second Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
</div>
Just remember that all the cards go in the card-deck div. A drawback of this is if you have lets say 6 cards, it'll put all of the cards on the same line instead of breaking them up in multiple lines. Whenever I want cards to be on multiple lines I just use another card-deck. Hope this helps someone, cheers.

One way of doing what you want is to put both cards in two separate columns, each, i.e each box card should be inside a div with class col-md-6.
The following code shows two cards, side by side in desktop browser window size.
<div class="row">
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">واحد جنيه سوداني = <?php echo convertCurrency("1.00", "SDG", "USD")." دولار امريكي";?>.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p>
</div>
</div>
</div>
</div>

Related

Why is the div row giving me columns?

I need to get the grid. 3-4 cards in a row. I am using row div but you are using data as column. Why?
<div class="row">
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
</div>
enter image description here
You seem to have each column wrapped in its own row, hence they fall underneath each other. Try putting both columns in the same row element. Something like this might solve you problem
<div class="row">
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
</div>
EDIT:
If you want to use a for/foreach loop, your code will look something like this:
<div class="row">
#foreach(var item in data){
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
#item.Quantity<br>
#item.Price<br>
#item.Name<br>
<hr>
</h3>
</div>
}
</div>

Problem with bootstrap card-columns - showing mess

I'm trying to make a masonry cards and I'm using bootstrap 4 for this, everything is okay until I add the card-columns class.
My html is:
<div class="wrapper">
<div class="container-fluid">
<div class="col-12">
<div class="row">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail">
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' read more..</p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
I'm using PHP get the information and print it as a card.
Reference for card-columns in Bootstrap.
If you want to restrict cards per column just use a structure as:
.container > .row > .col-xx
Ref:
https://www.codeply.com/go/AP1MpYKY2H/bootstrap-4-card-deck-columns-per-row
If you don't have a problem with restricting per row
.container-fluid > .card-columns > .cards (looped) should be enough.
Thank you
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail">
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' read more..</p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
you have declared the col-12 div before declaring the row
Its because the php function which is printing out the cards have <div class="col-md-2">, and with card-columns its not possible because bootstrap is setting them to responsive eg: 3 columns or 4, I removed the col-md and now everything is okay.
This is your code what you want, You just repeat the "card" class block, if you want to declare different columns style just create a baby change in css, don't need to declare col class in inside of card-columns
column-count: 3; // the count number is your choose, depend what column you want
<div class="card-columns">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Card text here read more..
</p>
<p class="card-text">
<small class="text-muted">Author: </small>
</p>
</div>
</div>
</div>

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

Blocks are floating on each other. Bootstrap

Good day. Tell me please. Taught django, and took the template html, css, js. There is used bootstrap. Few adapted it for myself. He worked on a 17 '' monitor. Actually, when the 21 'monitor began to look, the blocks ran over each other. Besides, on 15'6, through the phone everything is in order. Tried to attribute in addition to col-sm as col-lg - the result did not. Tell me, please, how can I solve this problem.
It should be - https://i.stack.imgur.com/usEMI.png
How it happened - https://i.stack.imgur.com/UvUfX.png
Right-sidebar code:
<div class="col-md-9 col-lg-9">
<div class="col-md-12 col-lg-12 page-body">
<div class="row">
<div class="sub-title">
<h2>Some Notes</h2>
<i class="icon-envelope"></i>
</div>
<div class="col-md-12 col-lg-12 content-page">
<div class="col-md-12 col-lg-12 blog-post">
<div class="post-title">
<h1>джанго код</h1>
</div>
<div class="post-info">
<span>джанго код / by джанго код</span>
</div>
<p style="word-break: break-all"> джанго код</p>
<span>Read More</span>
</div>
<div class="col-md-12 col-lg-12 text-center">
Load
<div id="post-end-message"></div>
</div>
</div>
</div>
Left-sidebar code:
<div id="main">
<!-- about(left sidebar) -->
<div class ="col-md-3 col-lg-3">
<div class="about-fixed">
<div class="my-pic">
<img src="{% static 'images/pic/av-pic.png' %}" alt="av-pic">
</div>
<div class="my-detail">
<div class="white-spacing">
<h1></h1>
<span>Learning Web Development</span>
</div>
<ul class="social-icon">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-vk"></i></li>
</ul>
</div>
P.S. Sorry for english.

Bootstrap Dynamic Layout Change

I am currently using bootstrap on a website which is displaying an ecommerce store.
The current layout is 3 columns of items within 4 rows, but I am wanting to implement a button which will change it to 2 columns.
I have done so, however the code seems to be causing some issues in that the layout changes to
Two Items
One Item
Two Items
One Item
Each one Item row has a large area of white space where an item could go.
The Code below shows one "Row" which is in the three column layout. I have used javascript which changes the class 'col-sm-4' to 'col-sm-6'. Where is my mistake here?
<div class="row"><!-- row 2 -->
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/raina_parka.png" class="product-image">
</div>
<div class="row product-status">
<span class="products-status-sale">Sale</span>
</div>
<div class="row">
<p class="product-name col-sm-12"<p>Raina Waterproof Parka</p>
</div>
<div class="row product-price">
<span>£99.00</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/april_jacket.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p class="product-name col-sm-12">April Waterproof Front Pocket Jacket</p>
</div>
<div class="row product-price">
<span>£99.95</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/free_delivery.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p></p>
</div>
<div class="row product-price">
<span></span>
</div>
</div>
</div><!-- end row 2 -->
The columns should only add upto 12. When you change 4 to 6 its becomes 18.
<div class="row">
<div class="col-lg-4"></div><div class="col-lg-4"></div><div class="col-lg-4"></div>
</div>
Problem solved. I just had to remove all of the rows and tweak the JS to add the class