I am tyring to create a card in bootstrap4 that has expand/collapse behavior with a red close 'X' button. I'm very close to having it done, but when I move my red x close icon outside the element that controls the expand/collapse logic, it moves the red close button to a lower row?
I tried changing margin-right and padding-right but wasn't able to fix it, can someone help?
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="card ml-5 mr-5 mt-5">
<h5 class="card-header expandable">
<a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example1" aria-expanded="true" aria-controls="collapse-example1" id="heading-example" class="d-block">
<i class="rotate fa fa-chevron-down "></i>
good style
<i style='color:red' class="fa fa-close pull-right"></i>
</a>
</h5>
<div id="collapse-example1" class="collapse show" aria-labelledby="heading-example">
<div class="card-body">
card body
</div>
</div>
</div>
<div class="card ml-5 mr-5 mt-5">
<h5 class="card-header expandable">
<a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
<i class="rotate fa fa-chevron-down "></i>
uh oh card-title margin looks weird?
</a>
<i style='color:red' class="fa fa-close pull-right"></i>
</h5>
<div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
<div class="card-body">
card body
</div>
</div>
</div>
https://jsfiddle.net/martinradio/s0ygr35L/8/
You do no need to use d-block on the a - Bootstrap will apply its own CSS and adjust the elements responsively and accordingly. I have removed the d-block and its working fine.
Working Fiddle Demo: https://jsfiddle.net/usdj51ga/
.expandable .fa {
transition: .3s transform ease-in-out;
}
.expandable .collapsed .rotate.fa {
transform: rotate(180deg);
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<div class="card ml-5 mr-5 mt-5">
<h5 class="card-header expandable">
<a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example1" aria-expanded="true" aria-controls="collapse-example1" id="heading-example">
<i class="rotate fa fa-chevron-down "></i> good style
<i style='color:red' class="fa fa-close pull-right"></i>
</a>
</h5>
<div id="collapse-example1" class="collapse show" aria-labelledby="heading-example">
<div class="card-body">
card body
</div>
</div>
</div>
<div class="card ml-5 mr-5 mt-5">
<h5 class="card-header expandable">
<a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example1">
<i class="rotate fa fa-chevron-down "></i> Yes! card-title margin looks Good!
</a>
<i style='color:red' class="fa fa-close pull-right"></i>
</h5>
<div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
<div class="card-body">
card body
</div>
</div>
</div>
I have added CSS3 display:flex property on your expandable div to make it inline.
Click below to check working example:
Working Example
Related
Im not sure what i am doing wrong but for some reason bootstrap 4 carousel controls is not working if anyone can help I would really appreciate it. Ive been playing around with the code for about an hour so I figure ill get a 2nd opinion to see what is going on.
I looked at the bootstrap docs and I copied and pasted the controls. I looked at the classes and everything looks the same
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
<!-- REVIEWS -->
<div id="reviews" class="py-3 bg-green" style="background: #186160;">
<div class="customer-reviews d-block text-center">
<h4> <strong> Customer Reviews </strong></h4>
<div style="color: #ffd400;"> ★ ★ ★ ★ ★</div>
<!-- SLIDER -->
<div class="col-lg-10 offset-lg-1 text-light">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner" role="listbox">
<!-- SLIDER 1 -->
<div class="carousel-item active text-center pt-4 ">
<blockquote class="blockquote text-center">
<div class="d-flex justify-content-around">
<div>
<p class="mb-0"><i class=" "></i> "I absolutely love this site, probably better than cebook"</p>
<p style="color: #ffd400;">Tomi_Jug****</p>
</div>
<div>
<p class="mb-0"><i class=" "></i> "I love all the users on this site, everyone is fun to talk with."</p>
<p style="color: #ffd400;">Chris****</p>
</div>
</div>
</blockquote>
</div>
<!-- SLIDER 2 -->
<div class="carousel-item text-center pt-4 ">
<blockquote class="blockquote text-center">
<div class="d-flex justify-content-around">
<div>
<p class="mb-0"><i class=" "></i> "I like the freedom it gives me to express, in a safe manner."</p>
<p style="color: #ffd400;">YoruUs**</p>
</div>
<div>
<p class="mb-0"><i class=" "></i> "I love that it's easy to chat with someone. You have a great mobile app. Easy to use."</p>
<p style="color: #ffd400;">HG****</p>
</div>
</div>
</blockquote>
</div>
<!-- SLIDER 3 -->
<div class="carousel-item text-center pt-4 ">
<blockquote class="blockquote text-center">
<div class="d-flex justify-content-around">
<div>
<p class="mb-0"><i class=" "></i> "I like that the site has cool people on it, and I can almost always meet someone new."</p>
<p style="color: #ffd400;">Wet an******</p>
</div>
</div>
</blockquote>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- SLIDER -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
Ids are different.
Make changes as
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
and check
My Html code (use Bootstrap4).
<div>
<span class="d-inline-block">
<i class="fa fa-file-alt fa-3x text-primary"></i>
</span>
<span class="d-inline-block">Kadastrinis numeris: <strong style="font-size: 22px;">8741/0002:0014</strong></span>
</div>
Comes out:
But need inline, example:
Is it something like this?
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- code below this line -->
<div class="d-flex flex-wrap">
<span class="align-self-center p-2">
<i class="fa fa-file-alt fa-3x text-primary"></i>
</span>
<span class="align-self-center d-inline-flex p-2 flex-column">Kadastrinis numeris:
<strong style="font-size: 22px;">8741/0002:0014</strong>
</span>
</div>
Im add div class d-inline-flex this work
I have two divs like this:
First div :
<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
<div class="container-fluid">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
</div>
Second div :
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
This two div are in :
<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;width:400px;margin-left:4px;margin-right:0em" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
<div class="container-fluid">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
</div>
<!--Collaspe zone-->
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</a>
Here what it looks like :
I want the space between the div to be greater than this , so i have tried with float and with margin but i have the same problem.
So i want the icon of expand more to be in the right margin 0 now it is in the center.
I think your codes is not completely posted here, so we have a difference in viewing.
But I see in your codes, the width has been set as fixed value 400px. That's why the icon could not move to right. Please remove the width:400px; in the a tag.
Maybe when you run code at your side, the a tag has been set display: block/inline-block .etc.. So you can see it can not move to right. That why we can not understand what you want.
Something like this? I need more details.
Just used d-flex from bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- just to show it whit boostrap -->
<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
<div class="d-flex" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;">
<div>
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
<!--Collaspe zone-->
<div class="ml-auto px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</div>
</a>
My problem was solved ! i followed this exemple
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</div>
</div>
</div>
I'm trying to align items in a div tag and I have tried a couple ways but failed to do so.
.
Basically this is what I have:
I tried using flex but when I align individual items to top, midlde or bottom, all 3 get aligned that way.
Is there a way I can do it using bootstrap only? and if not please help me with css. Thank you!
This is my code (the styles are in a separate file but I minimized it into the html code for this question):
<div class="card card-image" style="background-image: url(/uploads/projects/<%=user_data.projects[i]['image']%>); min-height: 200px;">
<div class="text-white text-center rgba-black-strong py-3 px-4 rounded" style=" min-height: 200px;">
<div class="--I tried flex and different aligns--">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
<%=user_data.projects[i].category%>
</p>
<h6 class="font-weight-bold">
<%=user_data.projects[i].title%>
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal<%=i%>"><i class="fa fa-clone left"></i> View</a>
</div>
</div>
</div>
You can use the classes d-flex, flex-column and justify-content-around to solve this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<div class="card card-image">
<div class="d-flex justify-content-center rgba-black-strong py-3 px-4 rounded" style="min-height: 200px;">
<div class="d-flex flex-column justify-content-around">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
1st item
</p>
<h6 class="font-weight-bold">
2nd item
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal">
<i class="fa fa-clone left"></i> View
</a>
</div>
</div>
</div>
Using Bootstrap 4...
Suppose I have the following flex-row inside of a div, with a font-awesome icon in each port-item and a small text instance below each icon. I'd like to vertically and horizontally center both the font-awesome icon and the text within their parent port-item div, and my 2+ hours worth of effort and searching have been in vain.
I imagine I have searched through about 15 topics on this site and arrived at nothing. I think my setup is unique due to the flex-row.
<div>
<div class="d-flex flex-row text-white">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing1">
<i class="fa fa-home d-block"></i>
Thing 1
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing2">
<i class="fa fa-graduation-cap d-block"></i>
Thing 2
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#thing3">
<i class="fa fa-folder-open d-block"></i>
Thing 3
</div>
<div class="port-item p-4 bg-twilight" data-toggle="collapse" data-target="#thing4">
<i class="fa fa-pencil d-block"></i>
Thing 4
</div>
<div class="port-item p-4 bg-citrus" data-toggle="collapse" data-target="#thing5">
<i class="fa fa-bolt d-block"></i>
Thing 5
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#thing6">
<i class="fa fa-envelope d-block"></i>
Thing 6
</div>
</div>
</div>
Here is the CSS acting on this region:
.port-item{
width: 16.6666667%;
.fa{
font-size: 2rem;
}
}
The 16.66667% is to ensure that each of the 6 port items take up and equal width of the flex row, which works fine. The font-size change is to clean up a responsiveness issue I had. Ignore the custom theme background classes; I made them myself. Ignore the data-targets and data-toggles as well; those come into play with some collapsing down further in the code, but I included them for completeness sake.
Picture of the issue:
As you can see, neither the font-awesome icon nor the text are aligned either horizontally or vertically.
EDIT: After ZNaneswar's edited answer, using my actual bar:
If I haven't missed something here, you should make the port-item a flex column container, which will stack the icon and text vertical (the text will become an anonymous flex item), and then will align-items/justify-content center them horizontally/vertically.
.port-item {
width: 16.6666667%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
<div class="d-flex flex-row text-white">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing1">
<i class="fa fa-home d-block"></i> Home
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing2">
<i class="fa fa-graduation-cap d-block"></i> CV
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#thing3">
<i class="fa fa-folder-open d-block"></i> Research
</div>
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing4">
<i class="fa fa-pencil d-block"></i> Teaching
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing5">
<i class="fa fa-bolt d-block"></i> Lifting
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#thing6">
<i class="fa fa-envelope d-block"></i> Contact
</div>
</div>
</div>
try this
add word-wrap: break-word;
.port-item{
width: 16.6666667%;
word-wrap: break-word;
text-align:center;
.fa{
font-size: 2rem;
}
}
p{
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="d-flex flex-row text-white">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing1">
<i class="fa fa-home d-block"></i>
Thing 1
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing2">
<i class="fa fa-graduation-cap d-block"></i>
Thing 2
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#thing3">
<i class="fa fa-folder-open d-block"></i>
Thing 3
</div>
<div class="port-item p-4 bg-twilight" data-toggle="collapse" data-target="#thing4">
<i class="fa fa-pencil d-block"></i>
Thing 4
</div>
<div class="port-item p-4 bg-citrus" data-toggle="collapse" data-target="#thing5">
<i class="fa fa-bolt d-block"></i>
Lifting
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#thing6">
<i class="fa fa-envelope d-block"></i>
Contact
</div>
</div>
</div>