I'm using the Bootstrap 4 Close icon inside an Alert.
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
</div>
https://www.codeply.com/go/4ImkAPOKug
The problem is that the close icon is not vertically centered within the anchor element. I would like to move it up a few pixels. When inspecting the .close CSS, I see that line-height:1 controls the height of the anchor, so adjusting line-height shrinks the height of the anchor, but I prefer to keep it as is for consistency.
Other than changing the line-height, is there a way to vertically position the icon within the line-box of the anchor? I've tried display:inline-block, vertical-align:middle, bottom margin, etc... but nothing seems to work. I don't want to vertical center within the alert.
Not the best way, but you can apply a margin-top of -0.15rem
.close {
margin-top:-0.15rem;
}
/* To illustrate */
.alert {
position:relative;
}
.alert:after {
content:"";
position:absolute;
top:26px;
left:0;
width:100%;
border-bottom:1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row py-3">
<div class="col-8">
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row py-3">
<div class="col-3">
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
</div>
</div>
</div>
</div>
You can use baseline to align the items by their baseline in a combination:
.alert{
display: flex;
align-items: baseline;
}
.alert:after {
content:"";
position:absolute;
top:31px;
left:0;
width:100%;
border-bottom:1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row py-3">
<div class="col-6">
<div class="alert alert-info p-2">
<p>The CVC card code is required</p>
<a class="close" data-dismiss="alert" href="#">
×
</a>
</div>
</div>
<div class="col-6">
<div class="alert alert-info p-2">
<p>The × aligns toward the bottom of the anchor's line-box?</p>
<a class="close align-top d-table-cell align-top" data-dismiss="alert" href="#">
<span class="border border-danger">×</span>
</a>
</div>
</div>
</div>
</div>
I wasn't able to get the standard close to align to the top properly. A workaround is to use align-text-top small to shrink the font and height of the close element.
<div class="alert alert-info p-2">
<a class="close" data-dismiss="alert" href="#">
<span class="align-text-top small">×</span>
</a>
The CVC card code is required
</div>
https://codeply.com/go/gr21OObdyV
Use flexbox to align the close-button vertically:
<div class="alert alert-success fade show d-flex justify-content-center align-items-center">
<i class="fa-duotone fa-circle-exclamation fa-lg me-auto"></i>
<span class="me-auto px-3">This is a success alert ...</span>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
Related
I'm new to Angular and Bootstrap, but I found a code from a website but when I put it in my project, the button did not work.
Any help would be appreciated.
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-6 col-lg-4" *ngFor="let P of products">
<div class="card" *ngIf="P.Category == selectedCategory">
<img class="card-img" src="{{P.Img}}" alt="Vans">
<div class="card-img-overlay d-flex justify-content-end">
</div>
<div class="card-body">
<h4 class="card-title">{{P.Name}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Serial No. {{P.SerialNumber}}</h6>
<p class="card-text">{{P.Description}}</p>
<div class="buy d-flex justify-content-between align-items-center">
<div class="price text-success"><h5 class="mt-4">${{P.Price}}</h5></div>
<button type="button" (click)="addToCart(P)" class="btn btn-danger mt-3 curs"> Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
and this is the css code
body {
padding: 2rem 0rem;
}
.like {
font-size: 1.5rem;
}
Thanks in advance
did you insert the bootstrap CDN link for CSS? if not then paste this under your css file inside the head section
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
I'm working with the .card below and having the dickens of a time getting the text "You liked this." in-line with the Like and Comment .btn-links beneath the hr element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
I've tried everything I can think of. Changing the display property. Using margins or padding. Adjusting the font-height. None of it has worked. I'm not sure how to get it to align and any help would be appreciated.
I probably could get it to work with using floats or even flexbox, but that seems over kill and I'd prefer not to if possible. Thanks.
You missed the vertical alignment, use the bootstrap class align-middle on your span.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted align-middle">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
You can use this code
body {
margin: 0;
padding: 0;
}
.btn-link {
font-weight: 400;
color: #007bff;
text-decoration: none;
margin-top: -4px;
}
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
I am using vue.js with Bootstrap.
There is modal dive which shows like below I am finding a class that increase the width of modal div,
My modal div looks like this. I am planning to add 12 more tabs and for that I will need more width.
I am using modal-lg class to set the width.
I am using below code for modal div
<div class="modal fade" id="modal_create_product" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Create Product
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Form Errors -->
<div class="alert alert-danger" v-if="createForm.errors.length > 0">
<p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
<br>
<ul>
<li v-for="error in createForm.errors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I just do
.modal-lg {
max-width: 70%;
}
Why don't you use the min-width CSS for your modal-content?
Like this:
.modal-dialog.modal-lg {
min-width: 80%
}
I tried to apply the float: right to the button and the text but its just not working because it destroys everything.
Any ideas?
<hr>
<div class="table">
<div class="row">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren
<span class="right-cell"> 14 neue Meldungen</span>
</div>
</div>
<hr>
https://jsfiddle.net/uoyh2fk9/
Not sure what, "destroys everything" means, but it sounds like flexbox might work better for what you are trying to achieve. Remove the display: table's from your divs and try the following:
CSS
.row {
display: flex;
justify-content: flex-end;
}
JSFiddle
If you would like to know more about flexbox and how it works, here is a link.
Here's a possible solution: https://jsfiddle.net/UXEngineer/uoyh2fk9/9/
<div class="container-fluid">
<div class="col-lg-12">
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-lg-12 clearfix"></div>
<div class="col-lg-12 clearfix">
<hr class="horizontal-divider">
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
</div>
</div>
I've added a responsive solution using the Bootstrap CDN to the example in JSFiddle. If you want to use this jsfiddle make sure you also add the CDN external sources to the your solution.
You can change the column size to fit your solution.
I am trying to center some text in the heading of a panel, along with a left-aligned button on the same row. The approach I'm currently taking works sort of OK for small widths, but as soon as the window gets to .col-sm territory (>750px) the text is no longer centered and instead seems to align right. Plus I'm not actually sure if this approach of trying to overlap a col-xs-1 and col-md-12 is really centering the text even for small window widths.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="container" style="padding:0;">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-12" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is a JSFiddle.
stdout, Hi there. You can actually have the Heading in the center if you like.
I mean actually centered in the full width. Your example is offset by 1 col.
I do it without that extra col offset and the button still to the left.
Have a look at this example in my Fiddle to see how the Header text is actually centered in the whole div.
It has a lot let cols/row etc.
I left one of the other examples above so you can see the difference.
Here is the CSS used for this example.
<style>
.align-left{
float:left !important;
}
.center-text-vert{
line-height:30px; /*height of the button*/
}
.center {
text-align: center;
margin-right: 55px; /*width from the left to the far right of the button */
}
</style>
<div class="container">
<div class="row ">
<div class="col-sm-8 col-sm-offset-2 ">
<div class="panel panel-primary ">
<div class="panel-heading">
<div class="center-text-vert">
<button type="button" class="btn btn-default btn-sm align-left">Button</button>
<div class="center">
Heading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try removing the container inside you panel and use pull-left class for your button and text-center class for your heading and see if that works for you.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm pull-left">Button</button>
</div>
<div class="col-xs-11 text-center">Heading</div>
</div>
</div>
</div>
What I guess you want is for the title to be full width at xs size and only take up a portion of the screen at sm and higher. To do that, remove the empty column and instead apply an offset. Also, note there are 12 columns so offsetting by 3 (i.e. 3 columns on the left and 3 on the right) means the middle column can only be 6 wide. I've set this one to be offset by 2 as an example. I've also fixed the inner columns to add up to 12 (although you should not nest container classes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-11" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>