I have the following html code with own css and bootstrap classes:
<div class="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">(+593%)</span>
</div>
And CSS:
.table-string {
width: 100%;
text-align: end;
}
I need to recieve column like this:
But actually get this:
How to align values without percentages in a column so that they are strictly under each other: hundreds under hundreds, tens under tens, ones under ones? And also value and percentage must be aligned at the end of the field. Thanks for any help
As a temporary solution, you can use something like this. Just set the width: 50%; of your <p> and <span> tags.
.table-string {
width: 50%;
text-align: end;
}
span.ml-2 {
width: 50%;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="d-flex">
<p class="table-string">91.86</p>
<span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
<p class="table-string">108.15</p>
<span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
<p class="table-string">329.93</p>
<span class="ml-2">(+593%)</span>
</div>
You need to divide your row into 2 equal halves and align text depending
<div class="row" style="width:10rem">
<p class="col-6 p-1 text-end">91.86</p>
<span class="col-6 p-1 text-start">(+61%)</span>
</div>
and this is an example
Let me know if you need anything else
Remove d-flex from all the Div's and put d-inline onto all <p>'s and <span>'s instead. With this you most likely do not need the CSS for .table-string so remove that as well.
Eg
<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">(+61%)</span>
Apparently you are using Bootstrap, and if I understood your question, you just need to add two classes to the flex item, flex-column align-items-end, in order to set the direction of flex items and change the alignment on the cross axis:
<div class="d-flex flex-column align-items-end">
[…]
</div>
Related
I need to make like a card, I've made it with a div, with an image and a text, and I don't know how to center them vertically. This is how my card looks:
and this is how it should look:
This is the code of the div:
<div class="panel mx-auto col align-items-center">
<img class="atajo-content" :src="shortcut.img" height="83" />
<p class="pt-1 card-name text-wrap">{{ shortcut.name }}</p>
</div>
And I just couldn't center the icon with the font. I've tested it with almost all combinations of bootstrap and I cannot understand what happens.
Can you please check the below code? Hope it will work for you. If you want your content to be vertically center, then you need to give specific height to the parent .main-content. Here we have used flex utility classes to center the content as per your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/n39zby6g/
.main-content {
height: 100vh;
text-align: center;
}
<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="main-content d-flex align-items-center justify-content-center">
<div class="panel">
<img class="atajo-content" src="https://via.placeholder.com/100x50" height="83" />
<p class="pt-1 card-name text-wrap">{{ shortcut.name }}</p>
</div>
</div>
I'm trying to add an icon to the bootstrap card. I want the icon, title, and text in the same row. for that, I used float left on the card icon but it didn't work. can someone advise how to do this?
thank you :)
.card-icon {
background: rgba(255,255,255,0.9);
border-radius: 50%;
width: 60px;
height: 60px;
float: left;
margin-right: 15px;
text-align: center;
}
.card-icon i {
font-size: 48px;
}
<div class="card m-b-30 card-body">
<div class="card-icon"><i class="mdi mdi-database"></i></div>
<h3 class="card-title font-24">Available Credits: 2</h3>
<p class="card-text">2 Email Verification Credits Left</p>
<div class="d-flex">
Buy More Credits
Track Your Credits
</div>
</div>
A good way to solve this problem is use flexbox.
Bootstrap 4 have a class d-flex to do that. By default, the flex-direction is row, so you will have your i h3 and p in the same row. And to make sure that the elements will fill all the width available, add flex-fill class in each element. The align-items-center class will try to center the vertical axis (but the margin top/bottom of elements can override this behavior).
<div class="card m-b-30 card-body">
<div class="d-flex align-items-center">
<div class="card-icon flex-fill"><i class="mdi mdi-database">a</i></div>
<h3 class="card-title font-24 flex-fill">Available Credits: 2</h3>
<p class="card-text flex-fill">2 Email Verification Credits Left</p>
</div>
<div class="d-flex">
Buy More Credits
Track Your Credits
</div>
</div>
Add your h3 and p elements to the inside of your div element. If this doesn't work make the widths of the elements percentages of the page, making sure they add up to 100% or less.
Edit:
In your css add
display: inline-block;
To ALL those elements.
I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this:
But, I am unable to align the contents to make sure that it looks like in the above picture.
The picture currently looks like this:
Here is the code:
<div class="col-xl-3 col-md-6">
<stats-card>
<div slot="header" class="folderRectangle">
<div class="row">
<div class="col-3">
<div class="clearfix">
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-9">
<div class="clearfix" style="position: relative">
<div>
<p style="text-align: left">Folder Name</p>
</div>
<div>
<p style="text-align:left">20 files</p>
</div>
</div>
</div>
</div>
</div>
</stats-card>
</div>
What wrong am I doing? How do I make sure that the folder icon aligns to the top and text floats to the center?
Instead of using .row and .col-*, you can use the media object already available in Bootstrap to produce this layout.
/* demo only */
.media {
border: 1px solid #ddd;
padding: 1.5rem;
margin: 1rem;
}
img {
max-width: 25px;
}
.media-body {
font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="media">
<img class="mr-3" src="https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt="Generic placeholder image">
<div class="media-body">
<h6 class="mt-0 mb-1">Folder name</h6>
<div>20 files</div>
</div>
</div>
The best possible way to achieve what you are trying is to use CSS Flex property.
Just give display flex to the parent (col-9) in your case.
Provide align items to be center.
and at last flex alignment to row.
this will make you achieve the above design
You can read about CSS flexbox more here
https://www.w3schools.com/css/css3_flexbox.asp
Though question is trivial and asked multiple time, but my difficulty arises from using Bootstrap 4 may be or some conflicts.
I want two divs up and down, fixed to bottom. Centered align with text
centered align too.
here is code:
<div class="row ">
<div class="myfooter text-center" style="display: inline-table;">
<div class="col-lg-12 col-md-12 ">
<div class="col-lg-6 col-md-6">
<span class='label label-default'>Copyright © 2018 Some Institute of Sciences, City, Country</span>
</div>
<div class="col-lg-6 col-md-6">
<span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
</div>
</div>
</div>
</div>
And style is:
.myfooter {
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
background-color: #21262929;
}
Issues:
If I change style="display: inline-table;" to anything else like block one of the div vanishes.
As I am not a designer so please give something ready to use. Thanks
Note: Bootstrap footer class is causing some issue, I can't trace.
You can simply do this:
.myfooter {
background-color: #21262929;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="myfooter container-fluid position-fixed fixed-bottom">
<div class="row text-center">
<div class="col-12">
<span class='label label-default'>Copyright © 2018 Some Institute of Sciences, City, Country</span>
</div>
<div class="col-12">
<span class='label label-default'>Developed By: Our Technologies (Pvt.) Ltd.</span>
</div>
</div>
</div>
And by best advice is to read more about how boostrap works and also check the utilities classes that will avoid you adding your own style.
I'm reaching this sketch:
how I can push image towards bottom, then I can align content noramally. For some unknown reason for me, content reacting like a row, not a column
<div class="d-flex flex-wrap">
<div class="premises">
<div class="left-wrapper">
<img class="img-responsive" src="http://i.imgur.com/riJ1LKY.jpg" />
</div>
<div class="right-wrapper align-self-end">
<div class="title">
<p class="">Title text</p>
</div>
<div class="ordered-data d-inline-flex justify-content-between">
<p class="">**.**.**</p>
<p class="">**:** - **:**</p>
</div> <div class="destination d-inline-flex justify-content-start">
<p class="">Destination</p>
</div>
<div class="footer-options d-inline-flex justify-content-between">
<p class="">Submit</p>
<p class="">Cancel</p>
</div>
</div>
</div>
</div>
Fiddle
First off, your .premises should have flex-direction: row; (or remove it for default behaviour) to get closer to the result in your original image.
Then you should set a min-height: 0; to your left and right wrappers to counter flex's min-height: auto; behaviour, and remove the height: 100%; as the value isn't explicitly set in the parent. I also recommend setting vertical-align: bottom; to your image tag.
Here is an updated, working fiddle: https://jsfiddle.net/ybxbx55m/