Working fine:
Looks clear, nothing goes over parent div.
But once i fill it with some content it expands:
<div class="d-flex mx-5 my-4 h-75">
<div class="w-50 d-flex flex-column" style="margin-right: 15px">
<!-- SEARCH -->
<div class="d-flex">
<card-search />
</div>
<!-- OTHER -->
<div
class="d-flex justify-content-between h-100"
style="margin-top: 10px; max-height: 100%"
>
<!-- FILTER -->
<div class="" style="margin-right: 15px">
<card-filter />
</div>
<!-- CATALOGUE -->
<div class="flex-fill">
<card-catalogue />
</div>
</div>
</div>
<!-- RIGHT -->
<div class="w-50">
<card-information />
</div>
</div>
Just try too add h-100 class hope that work for you and remove max-height: 100%
<div class="d-flex mx-5 my-4 h-75">
<div class="w-50 d-flex flex-column h-100" style="margin-right: 15px">
<!-- SEARCH -->
<div class="d-flex">
<card-search />
</div>
<!-- OTHER -->
<div class="d-flex justify-content-between h-100" style="margin-top: 10px;>
<!-- FILTER -->
<div class="" style="margin-right: 15px">
<card-filter />
</div>
<!-- CATALOGUE -->
<div class="flex-fill">
<card-catalogue />
</div>
</div>
</div>
<!-- RIGHT -->
<div class="w-50 h-100">
<card-information />
</div>
Related
I have some card with bootstrap and I would like to have left margin...I would like the cards to be evenly distributed across the width.
Basically, You can see that there is red on the right, and I wish there wasn't...
.azer {
background: red;
}
.card-annuaire {
background: green;
border: 0;
border-radius: 0;
margin-right: 1rem;
}
.card-annuaire .card-body {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf">
<div class="azer">
<div class="col-md-12">
<div class="row g-0">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see here: https://codepen.io/zazzou/pen/abYdZQL
EDIT
This is what I would like to do : (no margin left and right before and after the first card and last card)
Remove the margin-right: 1rem; from the .card-annuaire class, and replace g-0 on your row class to gx-3. This adds gutters in between your cards
Edit: Check this link out for more info on how gutters work in bootstrap: Bootstrap Gutters
Restore the column gutters
Make the cards full width
Place the red background on the row rather than a separate element
.azer {
background: red;
}
.card-annuaire {
width: 100%;
background: green;
border: 0;
border-radius: 0;
margin-right: 1rem;
}
.card-annuaire .card-body {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf">
<div class="col-md-12">
<div class="row azer">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to remove margin right from .card-annuaire Like this:
.card-annuaire {
background:green;
border:0;
border-radius: 0;
.card-body {
text-align: center;
}
Update
If you margin on both sides then you can do:
.card-annuaire {
background:green;
border:0;
border-radius: 0;
margin:0 1rem;
.card-body {
text-align: center;
}
.azer {
background: red;
}
.card-annuaire {
background:green;
border:0;
border-radius: 0;
margin:0 1rem;
.card-body {
text-align: center;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf" >
<div class="azer">
<div class="col-md-12">
<div class="row g-0">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want the 'title' to start right above 'first yeah', the image should also start there
I've tried several ways (and with some classes) but I haven't succeeded
The card code:
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block">
{{cosos}} title
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
I'm using Bootstrap 5 for everything, I have no classes or styles of my own
Step 1: remove class justify-content-center and add p-2 after class card-title. Now you will see your logo.gif and title will align with first nav bar item.
Step 2: Add place-self: center; to the div with class card-body.
Step 3: Assign background-color: #706747; to the class card, remove from card-body div.
The updated HTML will be like this:
<div class="card border-dark" style="background-color: #706747;">
<div class="card-body" style="place-self: center;">
<h1 class="card-title p-2">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block"> {{cosos}} title
</p>
</h1>
<div class="d-flex flex-nowrap bd-highlight ">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
You can make use of the grid-layout of bootstrap to align the elements.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<div class="row">
<div class="col-3">
</div>
<div class="col-2">
<img src="/assets/logo.gif" alt="" width="60" height="48" >
</div>
<div class="col-7">
<span id="title1"> fdasdstitle</span>
</div>
</div>
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
</body>
</html>
hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>
If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.
I would float the divs to the left with some padding and use clearfix if needed.
All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach
How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>
You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>