Align btn-block buttons with bootstrap - html

I've since yesterday a bootstrap bug that I don't understand.
I put 2 buttons in a div with a flex display and an align-items-center but the second one is lower than the first one and I can't make the adjustment to correct it.
My code:
<div class="d-flex justify-content-center align-items-center mt-1">
<i class="fas fa-cart-arrow-down"></i>
<i class="fas fa-store"></i>
</div>
My result:

This is due to the class .btn-block. As per bootstrap's documentation:
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
And to space out multiple block buttons vertically, _buttons.scss in bootstrap has:
.btn-block+.btn-block {
margin-top: .5rem;
}
So in your code, margin top is getting applied to the second button's btn-block class.
<i class="fas fa-store"></i>
You can either add below style to second button or modify class names depending on your requirement.
margin-top: 0;

Bootstrap is designed so that consecutive btn-block's stack vertically which is not happening because of the flex container. Instead of using btn-block inside the flex parent, use flex-grow-1...
<div class="d-flex justify-content-center align-items-center mt-1">
<i class="fas fa-cart-arrow-down"></i>
<i class="fas fa-store"></i>
</div>
https://codeply.com/p/gtjiTMOt76

Related

Centering header text horizontally on an <a> tag with role="button"

I am new to html and stack overflow. I'm now taking a course that focuses on the bootstrap framework. Is there a way of centering a header text within an a tag that has been assigned a role="button"?
I tried using regular text and the text appears where I want it but the font weight is too light. I tried making it bold with but that makes it too heavy. The h6 tag gave me the ideal weight but I'm unable to center it horizontally, as it appears up top. Preferably, I'd like to use bootstrap if it's possible.
Below is my current code:
<div class="col col-sm align-self-center">
<h6 class="text-center">Reserve Table</h6>
</div>
you can use text alignment classes from bootstrap
<div class="col col-sm align-self-center text-center">
To begin with: a is inline element and h6 is block element. Block elements are not valid inside of inline elements.
Put your a inside of h6 and use Bootstrap class text-center on h6;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<header>
<div class="col col-sm align-self-center">
<h6 class="text-center">
<a href="#reservationForm" class="btn btn-warning btn-block btn-sm p-2" role="button">
Reserve Table
</a>
</h6>
</div>
</header>
This example is based on Bootstrap v4.5

Vertically centered text using bootstrap's flex utils not working in IE11

I realize this question has been asked a lot
Example 1
Example 2
Example 3
but my question is different because I have the desired effect working on all browsers except IE11.
I'm aware of the flex auto margin bug, but my layout avoids using those so I don't believe that's the problem.
This is the layout I want to, and do achieve in modern browsers.
This works in Edge, Firefox, and Chrome. But in IE11, this is the result.
Here is the HTML
<div class="container pt-5 pb-5">
<div class="quote-container d-flex flex-column justify-content-center">
<p class="bold-weight extra-large-heading italic text-center">
<i class="fas fa-quote-left quotes mr-2" aria-hidden="true"></i>
Facts are meaningless. You could use facts to prove anything that's even remotely true.
<i class="fas fa-quote-right quotes ml-2" aria-hidden="true"></i>
</p>
<p class="text-muted text-center">– Homer Simpson</p>
</div>
</div>
And here is my CSS although very little of it has to do with the layout. The salmon color is only there to make seeing the container easier.
.quote-container{
min-height:600px;
background:salmon;
}
.quotes {
color:
#FFA300;
}
/*Generic Styles*/
.extra-large-heading {
font-size: 2rem;
}
.italic{
font-style:italic;
}
.bold-weight {
font-weight: 700;
}
I have created a fiddle that recreates this issue.
https://jsfiddle.net/1wztmvo5/1/
If you want to see the issue in IE11, you'll have to use this embed link.
https://jsfiddle.net/1wztmvo5/1/embedded/result,css,html,js
Any help would be really appreciated. I'm pulling my hair out over this one.
You have encount the bug that min-height property is ignored on Internet Explorer 11 with use Flexbox. This bug is listed GitHub's Flexbugs repository.
Flexbug #3
min-height on a flex container won't apply to its flex items
In order for flex items to size and position themselves, they need to know how big their containers are. For example, if a flex item is supposed to be vertically centered, it needs to know how tall its parent is. The same is true when flex items are told to grow to fill the remaining empty space.
In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.
This bug's one of the workaround is wrap the flex container other flex container.
jsFiddle for result check in IE11
.quote-container{
min-height:600px;
background:salmon;
}
.quotes {
color:
#FFA300;
}
/*Generic Styles*/
.extra-large-heading {
font-size: 2rem;
}
.italic{
font-style:italic;
}
.bold-weight {
font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-5 pb-5">
<div class="d-flex flex-column"><!-- Add wrapper flex container -->
<div class="quote-container d-flex flex-column justify-content-center">
<p class="bold-weight extra-large-heading italic text-center">
<i class="fas fa-quote-left quotes mr-2" aria-hidden="true"></i>
Facts are meaningless. You could use facts to prove anything that's even remotely true.
<i class="fas fa-quote-right quotes ml-2" aria-hidden="true"></i>
</p>
<p class="text-muted text-center">– Homer Simpson</p>
</div>
</div>
</div>

Align text right in-line with Bootstrap 4 [duplicate]

This question already has answers here:
Left align and right align within div in Bootstrap
(7 answers)
Closed 4 years ago.
I'm currently using bootstrap 4. I'm trying to align text right on my card header, I tried using ml-auto but it didn't work. What could be the solution?
Here's my card header code:
<div class="card-header bg-info text-white">
<i class="fa-th"></i> Media Library
Add Media
</div>
In order for the ml-auto class to work you just need to add the d-flex class (display:flex) to the parent element like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card-header bg-info text-white d-flex">
<i class="fa-th"></i> Media Library
Add Media
</div>
It depends on the version of Bootstrap you are using
Bootstrap 3
use the class text-right
Bootstrap 4
In newest version, you can use the class text-lg-right using the viewport size you prefer of course
Additionals
You check more in this question or check the official documentation v4
I don't use Bootstrap, I use the Materialize but you could add normal styling to it,
on your
<i class="fa-th"></i> Media Library
This would align only you anchor tag to the right
Use this cord...
<div class="card-header bg-info text-white" style="text-align:right">
<i class="fa-th"></i> Media Library
</div>
Use this class text-right..
<div class="card-header bg-info text-white text-right">
<i class="fa-th"></i> Media Library
</div>

Text is not aligned properly on row

See the following example:
<div class="row">
<div class="col-2">
<p>Error</p>
</div>
<div class="col-8">
<div class="progress error" data-toggle="tooltip" data-placement="bottom">
<div class="progress-bar error-bar" role="progressbar"></div>
</div>
</div>
<div class="col-2">
<a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text">
<i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"></i>
</a>
</div>
</div>
The text "Error" is not vertically aligned properly with the prograss bar and font awesome icon. I tried adding vertical-align: top to <p> but it did not make a difference. How do I correctly vertically align the text?
You can add line-height: 1rem; to <p>
Try to add the class align-items-center to your row, this will make all cols vertically aligned in the center of the row.
If you have any question about the Bootstrap grid system, check out the documentation, that's pretty good by the way.
The property vertical-align only applies to inline and table cells elements, check out the MDN documentation about that. So, vertical-align will only work if your <p> element is an inline element, and if has enough height to be aligned.

Two auto width flexbox columns with only one that wraps

I have two auto width flexbox columns displayed inline. I expect to have dynamic content in the columns so I am trying to figure out a way to wrap only the first column which contains the menu items.
I know I can wrap both of them using the "flex-wrap" class on the "d-flex" div but I only want to wrap the first auto width column while keeping the two columns inline of each other.
I am using Bootstrap 4 CSS which already contains the flexbox classes I am using, please see an example on the fiddle I've provided.
My desired result would be something like this image example:
https://jsfiddle.net/j9v70qvy/
<div id="header-middle">
<div class="container">
<div class="row align-items-center">
<div class="header-middle-mobile-menu-outer col col-auto hidden-md-up">
<a class="header-middle-mobile-menu-toggle">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo-outer col col-auto">
<div class="logo-image">
<a href="#">
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&ust=1502481095339508">
</a>
</div>
</div>
<div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start">
<div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down">
<nav class="header-middle-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Sample Page</li>
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
</ul>
</nav>
</div>
<div class="header-middle-social-media-icons-outer col col-auto">
<nav class="header-middle-social-media-icons text-center icons-circle icons-sm">
<ul class="social-media-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Okay, I think I finally figured out what the deal is. The Bootstrap defaults for some classes you have are different from what you want in this case.
You need to override the default styling for .col-auto on .header-middle-menu-outer. It is the flex-shrink value of 0 in the shorthand flex property that is killing you. Since the columns aren't allowed to shrink, you're getting things pushed off the side of the screen, and no wrapping is happening.
The default flex styling will suffice for .header-middle-menu-outer, so you can just use this in your CSS:
.header-middle-menu-outer.col {
flex: initial;
}
That will set things back to the default of flex: 0 1 auto, which will mean that the left column will be allowed to shrink while the right column will continue not shrinking. So the left column will wrap, and the right won't.
I would say you could simply strip away the col-auto class (which you may do anyway), but then you'd fall back to the styling for .col, which also includes the same problematic style: flex: 0 0 auto. So unless you want to remove that class too, you'll probably have to use an overriding style in your CSS either way.
Updated fiddle.
As a side note, I'd recommend you re-visit which classes you include on each element. If you inspect things in your browser console, you'll see that you have a lot of competing styles being applied by those classes, which aren't helping you out any. For example, .d-flex contains both justify-content-end and justify-content-md-start, which do exactly the opposite thing. But in this case, I believe you need neither. In the fiddle I linked above, if you delete both those classes, the layout doesn't change at all.
Also, the classes col-auto and col are very similar. In the case above for .header-middle-menu-outer, even though removing col-auto won't fix your problem, you might do it anyway because I'm not sure that class is really adding anything at this point.
I suspect there are many classes you could eliminate and then if there is a certain style rule for one of those removed classes that you want to include, just drop that in your stylesheet as a one-off.