Vertically Center Content in Bootstrap 3 - css

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.

Related

How to stop flex to auto adjusting, currently based on text length its auto adjusting. I want the entire table to be same size despite any text length

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)

Bootstrap cols shorter than content

Lately, I've run into a problem when trying to get my web aps to work with small devices. Even then, this doesn't seem to always be an issue, it will depend upon the orientation of the phone. What I'm seeing is say I have a Bootstrap 4 ROW with a col-3 col-6 col-3 setup. The center col has more height and includes images where fade in and out of opacity, so the height is constant. When BS does its thing for smaller displays, the first col-3 breaks properly, leaving space for the col-6. The problem is the col-6 seems to break at the col-3 height and I get over lapping. When using the dev tools, I can see this is the case but I dont want to set a hard height because that makes the spacing go weird and defeats the whole BS purpose. Here are some examples:
<div class="row" style="margin: 0vh 5vw;">
<div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
<div>
<i class="fa fa-eye features-icon"></i>
<h2 style="color: white; font-size: 3vmin">Something</h2>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center wow" style="height: 53vh;">
<img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh;
display:block; position:absolute; opacity: 1;">
<img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top:
3vh; display:block;position:absolute; opacity: 0;">
</div>
<div class="col-md-3 col-sm-12 text-center wow fadeInRight">
<div>
<i class="fa fa-database features-icon"></i>
<h2 style="color: white; font-size: 3vmin">More blah blah</h2>
</div>
</div>
</div>
This image shows where col is over lapping (blue icon)
BTW, I've set the center col height because without it, I get no height to that col. I've tried manipulating it, but it seems that whatever I do, it will fix it for one layout orientation and mess up the others. I must be missing something simple in BS. Thanks in advance for your help.
That row has an inline style defining a margin, maybe the view units are causing the problem. Try changing that around to % or px to see how it behaves or remove that margin all together and use bootstrap's margin utilities. Other thing I can think of would be to try and wrap the overlapping elements in two different .container-fluid
So, I ended up doing what I consider a cheat using jQuery. I gave the col div an id of #mcsCol and put this in my $(document).ready(function)
$("#mcsCol").css({ "height": $("#img1").css("height") });
So essentially, it will check the height of the image and set the col to the same height. If you have a more native solution, I'd love to see it.

div text exceeds parent's width

img of what is actually happening
Basically, there is a div which its text is exceeding its maximum width. Ive already tried to set max-width:100% (to see if it sets the maximum width to parent's full width) in more or less 10 parent divs but the problem is still happening. Also, ive already looked for some similar posts in here and most of them tell me to use white-space:normal but it actually breaks a new line for every word.
In the example below, you can find 3 fields, the first one is the "normal" one, and the others are with white-space:normal.
The source code doesn't seem to have any problems with it:
<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
<label translate>Escolher Opção:</label>
<div class="row">
<div class="btn-group form-vote" data-toggle="buttons">
<div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
<div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
<i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
<div style="white-space: normal;"> {{option.description}} </div>
</div>
</div>
</div>
</div>
</fieldset>
JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/
Problem the second div get witdh of btn-cirlce.
You should move out the div
<div style="white-space: normal;"> {{option.description}} </div>
of <div class="btn-circle btn-success"
Set .btn-circle and .description as inline-block
Demo https://jsfiddle.net/viethien/z87ar50e/5/

Is it possible to put "row"-s inside "d-flex" in Bootstrap 4?

(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.

Center within a Bootstrap Well

I have been struggling to get the contents of a boostrap well to center. My badge goes to the right, instead of under the arrows, and my arrows (aka, vote buttons) are not centered in the well either. I have attached a screenshot, and here is the relevant code:
HTML:
<div class="col-md-1 col-sm-1 well">
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="upVote(article);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="downVote(article);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
Here is the only custom CSS beyond default bootstrap:
/* Voting styling */
.votingButton{
cursor: pointer;
}
Here is the screenshot:
try class="text-center", that should do the trick, if not you can reposition it using style="postion: absolute; margin-left: -5px;", if you're not too picky about the well size, that might be another problem as "well". fix the size to be a little bigger, that would help.
Your column width is too small to render correctly. You need to change col-md-1 col-sm-1 to col-md-2 col-sm-2 or reduce the padding inside the div.

Resources