Bootstrap 4 card/panel with image left of header and title
There are a few different ways you could do this. Here's one way using the flex-row and flex-wrap utility classes to change the layout of elements inside the card...
https://www.codeply.com/go/l1KAQtjjbA
<div class="card flex-row flex-wrap">
<div class="card-header border-0">
<img src="//placehold.it/200" alt="" />
</div>
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">BUTTON</a>
</div>
<div class="w-100"></div>
<div class="card-footer w-100 text-muted">
FOOTER
</div>
</div>
Here's another approach using the grid...
<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">BUTTON</a>
</div>
</div>
</div>
<div class="card-footer w-100 text-muted">
Footer stating cats are CUTE little animals
</div>
</div>
https://www.codeply.com/go/l1KAQtjjbA
I'm not sure why you have text-center as nothing it centered in the desired example image.
bootstrap 4 fixed-height card with dynamic height header image
You can achieve what you are looking for with a little help from flexbox. Instead of using the image top, add a div with the image as the background set to cover. See example below.
/****==== NEWS STORIES ====****/
#news-stories .card { height: 400px /*Set this to whatever you want the fixed height to be */}
#news-stories .card-title { margin: 20px;}
#news-stories .card-body { background-color: #fff; margin: 0; padding: 0 !important;}
#news-stories .imagebg { background: url("https://picsum.photos/200/300"); background-repeat: no-repeat; background-size: cover;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container"> <section id="news-stories">
<div class="card-deck"> <div class="card">
<div class="card-body d-flex flex-column"> <div class="imagebg flex-fill"></div> <h5 class="card-title flex-grow">This is a News Story Headline title showing the maximum height of 4 lines of text</h5>
</div> <div class="card-footer"> <p><span>Published:</span> Nov 11, 2019</p> </div> </div>
<div class="card"> <div class="card-body d-flex flex-column"> <div class="imagebg flex-fill"></div> <h5 class="card-title">This is three lines of Text that will display in the headline</h5>
</div> <div class="card-footer"> <p><span>Published:</span> Nov 11, 2019</p> </div> </div>
<div class="card"> <div class="card-body d-flex flex-column"> <div class="imagebg flex-fill"></div> <h5 class="card-title">This is two lines of Text that will display</h5>
</div> <div class="card-footer"> <p><span>Published:</span> Nov 11, 2019</p> </div> </div>
<div class="card"> <div class="card-body d-flex flex-column"> <div class="imagebg flex-fill"></div> <h5 class="card-title">This is one line</h5>
</div> <div class="card-footer"> <p><span>Published:</span> Nov 11, 2019</p> </div> </div>
</div> </section></div>how to move an image in bootstrap 4 card header to the right?
I have recreated a simple case of what you have described. I used Flex Box to create what you have asked. I created a container div, then two child divs (left div and right div) then assigned flex: 1 do both the left and right div to give them an equal width. After that I assigned the image (in the right div) justify-content: flex-end This moves the content of the right div to the far right of the div.
HTML
<html>
<body>
<div class="header">
<div class="title">
<p>Text</p>
</div>
<div class="img">
<img src="smiley.gif">
</div>
</div>
</body>
</html>
CSS
.header {
display: flex;
width: 100%;
height: 45px;
background: red;
}
.title {
flex: 1;
background-color: green;
}
.img {
flex: 1;
display: flex;
justify-content: flex-end;
background-color: yellow;
}
Here is a quick reference for you to use:
justify-content: flex-start means content will start from the left
justify-content: center means content will be centered in the middle
justify-content: flex-end means content will be pushed to the end of the div (right)
I have put together a fiddle for you: http://jsfiddle.net/k5uj04dt/6/
How to insert a photo into bootstrap card panel
Just replace this:
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Project 1</text></svg>
With this:
<img class="card-img-top" src="https://media1.giphy.com/media/l0HlSBFa5Z9onGbcc/giphy.gif">
Complete code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<img src="https://media1.giphy.com/media/l0HlSBFa5Z9onGbcc/giphy.gif">
<div class="card-body">
<p class="card-text">Click "View" to see my posted Project 1. Project 1 is my personal Student Feedback Form. When the form is submitted it will display to you the data inputted as well as give the course and professor a score.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Bootstrap: CardHeader with buttons on the right
Hey I believe this is what you are trying to accomplish. All I did was add container-fluid to the class with your card-header div, and then I added a row to contain your bootstrap columns and it seems to have fixed it.
<div class="card-header container-fluid">
<div class="row">
<div class="col-md-10">
<h3 class="w-75 p-3">{{categorie.name}}</h3>
</div>
<div class="col-md-2 float-right">
<button class="btn btn-primary"
(click)="onAddCategoieModal(addCategorieModal)">Add</button>
<button class="btn btn-primary" style="margin-left: 1em"
(click)="onAddCategoieModal(content)">Edit</button>
</div>
</div>
</div>
Here's a codepen. If that's not doing exactly what you were wanting, could you clarify with what else you were wanting it to do?
How to split 'title' and 'icon' in Bootstrap panels?
My solution using flex, move your icon before text and set
.panel-title{
display: flex;
align-items: center
}
.panel-title { display: flex; align-items: center }
.panel-title > i { margin-right: 10px; }
.btn, .btn:hover, .btn:focus, .btn:active, .btn:active:focus { outline: 0; }
.btn-custom { margin-bottom: 1em; }
.no-margin { margin: 0; }
.no-padding { padding: 0; }
.no-border { border: 0; }
.no-radius { border-radius: 0; }
/*** Content ***/ main {}
.i-row { padding-top: 40px; padding-bottom: 40px; }
.i-row-odd { background-color: #ffffff; }
.i-row-even { background-color: #f7f7f7; }
.section-title { margin-top: 0; margin-bottom: 0.6em; font-weight: 500; }
.section-title .fa { margin-right: 5px; color: #6f5499; }
.i-accordion .panel-heading, .d-accordion .panel-heading, .accordion-2a .panel-heading, .accordion-2b .panel-heading, .accordion-3 .panel-heading { cursor: pointer; }
.d-accordion .panel-heading.collapsed .fa-chevron-up:before { content: '\f078'; }
.panel-success>.panel-heading { background-color: transparent; border-color: transparent; }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"><div class="col-md-6"> <div class="panel-group i-accordion"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3"> <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4> </div> <div id="aboutus3" class="panel-collapse collapse"> <div class="panel-body"> <p>answer</p> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3"> <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttest</h4> </div> <div id="whoweare3" class="panel-collapse collapse"> <div class="panel-body"> <p>answer</p> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3"> <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttesttesttesttestesttes ttesttestt</h4> </div> <div id="contactus3" class="panel-collapse collapse"> <div class="panel-body"> <p>answer</p> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#cold"> <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4> </div> <div id="cold" class="panel-collapse collapse"> <div class="panel-body"> <p>answer</p> </div> </div> </div> </div></div>Boostrap 4 card card-img-bottom not working inside tab-pane
Just wrap the inner content of tab panel in one div with classes d-flex, flex-wrap and give the image tag class mt-auto.
Try this:
check demo Here
<div class="container-fluid">
<div class="card-deck mb-3 text-center">
<div class="card box-shadow text-center">
<div class="card-header">
<h4 class="my-0 mb-3">Card A</h4>
<ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
</li>
</ul>
</div>
<div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
<div class="tab-pane fade h-100 show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option A</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
<div class="tab-pane fade h-100 " id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option B</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
<div class="tab-pane fade h-100" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option C</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
</div>
</div>
<div class="card mb-8 box-shadow">
<div class="card-header">
<h4 class="my-0">Card B</h4>
</div>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
Related Topics
Filter: Progid:Dximagetransform.Microsoft.Gradient Is Not Working in Ie7
How to Get The Cursor to Change to The Hand When Hovering a <Button> Tag
How to Add a Svg as Content on: Before Pseudo Element of an Element
Using Proper CSS Media Queries in Angular
Image Paths in CSS to Support Cdn
How to Style Bootstrap Col-Lg-* Classes
Center Two Divs in The Middle of a Wrapper
What Does The & Mean in an SCSS Selector
Why Won't Opera (11.00) Display Custom (@Font-Face) Fonts
CSS Table Border Spacing Inside Only
CSS Horizontal Navigation Spacing
Font Awesome Icons Are Not Working in Some Browsers
Adding CSS Class to Multiple Elements
How to Make Custom Scrollbars Show in All Browsers
Best Unit for Font-Sizes in CSS