How to get this aligned as i was not able to align
<div class="d-flex justify-content-between">
<span>Total Items: #Model.Count </span>
<div class="d-flex flex-row align-items-center">
<span class="text-black-50">Sort by:</span>
<div class="price ml-2">
<span class="mr-1">price</span>
<i class="fa fa-angle-down"></i>
</div>
</div>
</div>
If you want a quick solution, assign the elements a specific percent width and set flex-grow: 0;.
However, flexbox is probably not the right solution to your problem in the first place, since you can only align items in one direction.
If you need your columns to be aligned, try CSS Grid Layout, which is similar to flexbox but allows you to use both rows AND columns to align your items.
(I know some people have an opposition to W3schools, but their CSS Grid tutorial is helpful for getting started)
Related
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
I want to display a optional text suffix within a vertically centered flexbox/bootstrap column. It should only be displayed on small screens. The following code works, but only if I use the "display:contents" on the span-element, which doesn't have a perfect browser support. If I remove the "display:contents", the text suffix is displayed as another column. How can I make the text suffix flow with the previous text, without using display:contents?
<div class="row">
<div class="col-2">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
</div>
<div class="col d-flex align-items-center">
Title text Title Text
<span class="d-lg-none" style="display:contents">
(Optional column is here on small devices)
</span>
</div>
<div class="col-2 d-none d-lg-flex align-items-center">
Optional column
</div>
</div>
https://jsfiddle.net/9z81tvsx/
d-flex is display:flex;
The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it
generates an inline box. Otherwise it generates a block container box.
https://developer.mozilla.org
You are using .d-flex on its parent. Therefore, the span.d-lg-none has display:block in small size screen. And hence, it behaves like a column.
You can fix the issue by wrapping the text in a Paragraph element.
<p>Title text Title Text <span class="d-lg-none" >(Optional column is here on small devices)</span></p>
Currently I'm struggling with flexbox column. Checked so many websites, but still no solutions to be found on the internet for this problem.
The case:
On the right side of my viewport I've got a full-height flex-column, containing 2 elements (see headset icon and hangup button). I used flex-column to vertically align my elements.
The first element should be on the top right corner, the second element should be at the center right.
Since it's a flex-column I can't use align-self-center on the second element, because it will be centering on the x-axis instead of the y-axis.
I was wondering if this is even solvable with just flexbox or if I need to position this centered element a different way?
I'm using the bootstrap 4 flex classes to apply flexbox.
Code example: https://jsfiddle.net/mv1e7py0/18/
<div class="flex-container flex-column main-containere video-container">
<div class="communication-controls d-flex justify-content-between">
<div class="left-controls d-flex flex-column justify-content-between">
<button class="chat-toggle">
Chat
<div class="indicator bg-red"></div>
</button>
<button class="mic-toggle">
Mic
</button>
</div>
<div class="right-controls d-flex flex-column justify-content-between">
<button class="speaker-toggle">
Headset
</button>
<button class="dismiss-call red align-self-center">
<span>Hang up</span>
</button>
</div>
</div>
</div>
What I want it to look like:
#miranda-breekweg here are 2 quick solutions that I hope you'll find helpful:
In both cases we'll keep justify-content set to space-between.
the first thing that comes to mind is to simply set the height of the right column to 50% (+ half the height of that button you want to center)
.right-controls {
height: calc(50% + /half the height of your button/);
}
the second and probably the easiest solution is to simply add auto margins (top and bottom) to the targeted button. This way, you don't have to worry about calculations:
.dismiss-call {
margin: auto 0;
}
Fiddle:
https://jsfiddle.net/mv1e7py0/39/
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I recognize that this question has been asked a hundred times. However, the answers that I see do not work in my situation. This makes me believe there is something additional in my content.
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
</div>
I want the remove [x] in the second column to be vertically centered in relation to the first column. Right now, the remove [x] is vertically centered across the top. I thought I could vertically center the content by doing the following:
<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
Unfortunately, that did not work. I'm not sure what I'm doing wrong.
First, I'd recommend you to add an additional class to the columns you want to work with. In your bare-bones example, it won't make a difference, but once you start adding more elements, you'll find out the advantages of managing elements by their re-usable class.
So, first step, a tiny change in your HTML. Not really needed since you could easily target (for example) .col-xs-6 , but this is a general approach (as we're at it, I'd add a class to that row and remove that inline style)
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<span class="pull-right remove">
remove
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
</div>
Now that we can SAFELY target Bootsrap element without affecting the flow of the same re-usable classes in further uses, we simply give a vertical-align to them, like this:
.midvert {
display:inline-block;
vertical-align:middle
}
See how the vertical align is added to the CONTAINING BLOCK ELEMENT, not the element you want to align itself. But of course, that won't do anything at all, because our .remove element needs some sort of defined height, so we add the following:
.remove {
line-height: 4;
}
While the reasons for single numbers is open to discussion (you could use px, rem, em, %, etc), and I have seen that most people here use the px approach, I prefer to use single numbers. You can see the rationale here Prefer unitless numbers for line-height values , but again, use as you please. You'll notice that a number between 4 and 4.5 is the perfect fit, just resize window and see it by yourself.
I've forked a Bootply to demonstrate the issue
You could achieve this by adding a line-height to your "remove" link.
For example if you add this class to your link:
.remove {
line-height: 40px;
vertical-align: middle;
}
It will be aligned.
Bootply demo
I have created Fiddle for you, Hopefully this work for you.
Please observe css tab where i have added display:table-cell; for other col-sm-6 css class as well.