I have a leaderboard sort of thing, this is for something at work.
This is a bootstrap element and I want the numbers to be aligned to the right, the numbers should be vertically aligned. See example of how it currently looks on the image: enter image description here
Here is the code, I use EJS to for loop this, hence only 1 instance, I've translated all EJS elements to normal HTML:
<div class="card d-flex" style="display: inline-block; width: 350px; float: right; margin-right: 100px;">
<ul class="list-unstyled card-body mb-0 pb-0">
<li class="media mb-3">
<div class="media-body">
<div style="display: inline-block;">
<strong style="font-size: 20px;">Jordan</strong>
<p class="float-right pull-right" style="padding-left: 200px; font-size: 20px; font-weight: 650">12</p>
</div>
<div class="progress mb-1" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%; background-color: green" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
</div>
Tried using text-align, float, pull-right, text-right, mt-auto etc. doesn't do anything.
If you don't require it for some other reason you can replace display: inline-block with display: flex; justify-content: space-between
This should space it so it takes up the maximum amount of space between the 2 text elements and the length of the name wont effect the number position :)
Related
I am facing a problem in which I want the content which is written on the left half of the screen should be written on the image which is on the right side when decreasing the screen size.
for reference, check the image as I want this problem image
to be like this Solution image when I decrease the size of my screen, But my screen looks like this at present. I need the solution as soon as possible.
Note: I used mostly pre-defined classes of bootstrap4 for this.
code is-
<div class="row">
<div class="col p-0 col-6 bg-creame" style="height: 100vh;">
<div class="h-100 d-flex flex-column justify-content-start pt-5">
<div class="m-5 pt-5 pr-5">
<h1 class="mb-5"><b style="font-weight: 900;"><b>Contact</b></b></h1>
<p class="m-0" style="font-weight: 900;font-size: 18px;">Email Address</p>
<p><a style="color: inherit !important;font-size: 23px;" href="mailto:support#regid.ca">support#XXX.com</a>
</p>
<p class="m-0 mt-5" style="font-weight: 900;font-size: 18px;">Mailing Address</p>
<p style="font-size: 23px;">
XXXXXX, 77 XXXX XXX X,
XXXXXX, XX XXX 6XX
</p>
<div class="d-none d-lg-block">
<button class="text-uppercase btn pr-5 pl-5 color-creame bg-orange"
style="border-radius: 50px; letter-spacing: 1px;font-size: 20px;">
Contact Us
</button>
</div>
</div>
</div>
</div>
<div class="col p-0 col-6 bg-orange" style="height: 100vh;">
<div style="position: absolute; bottom: 0; right: 0;">
<div class="h-50 bg-orange d-flex flex-column justify-content-end" style="padding-top: 14rem;">
<div class="text-center p-4">
<i class="fas fa-arrow-up bg-black" style="font-size: 2rem;"></i>
</div>
</div>
</div>
<div class="d-flex flex-column h-100">
<img height="100%" width="100%" src="./assets/img/Rectangle 8 (2).png" class="img img-responsive">
</div>
</div>
</div>
You could use z-index to push the image behind the text and do something like this
#media (max-width: 600px) {
img {
width: 100%;
z-index: -1;
}
div {
z-index: 1;
}
}
The cards html looks like this:
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1</b>
</h1>
</div>
</div>
</div>
</div>
and it creates:
The background color for both the card and the card body is set in a css sheet to white with an opacity of 0.4. As you can see the width of the card is bigger than the width of the image and the card body. If i remove the row related classes from this, they are the same size however this will not work as they stack vertically. I cannot use a card deck because i want these to have a fixed width and be horizontally scrollable which doesn't seem to work with a card deck. How can I make the width of the card match the width of the image and body?
The cards should be placed inside columns.
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... "
Also...
"When building grid layouts, all content goes in columns. The
hierarchy of Bootstrap’s grid goes from container to row to column to
your content. "
You don't want to...
Use a col-* without a row as it's immediate parent.
Place content directly inside the row.
Regardless of how you use the grid classes (correctly or incorrectly), in your case the source of the space is padding BS applies to .card.
You can add .p-0 to the .card or otherwise set the padding to zero on the element. In the snippet below I have added .p-0 only to the first card for comparison:
div.container-fluid {
background-color: DarkSlateBlue;
}
div.card,
div.card-body {
background-color: rgba(255, 255, 255, 0.4);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card p-0" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2 .card.p-0</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1 .card</b>
</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
I am trying to embed two websites onto my website. My goal is to display these websites next to one another in a custom sized iframe while being responsive to the view port size. I am utilizing Bootstrap 4's column and row functions to try and accomplish this. However, the spacing between the columns is too large:
Note this is a previously asked question and I have looked at the Seen Forum A and SeenForumB however neither have been any good at solving my problem.
code:
<div class="col-auto mb-3">
<div class="card" style="border: none;">
<div class="card-body">
<div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
<div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
<b>EXAMPLE WEBSITE
<span style="float: right; font-size: 20px;">
<a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<i class="fas fa-expand"></i>
</a>
</span>
</b>
</div>
<div class="card-body" style="padding: 0;">
<iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
```
You can use the .no-gutters class to knock off the spacing between the columns. I'd do it on the same line as your row so basically :
<div class="row no-gutters">
In your case - the key element is padding and margin added to .card and .card-body classes. Have a look below what happens if you override margins and paddings to 0. The big gap disappears and you can control it by adding your own paddings and margins according to how big the gap between columns you want to create. Code below:
<div class="container">
<div class="row">
<div class="col-6 m-0 p-0">
<div class="card m-0 p-0" style="border: none;">
<div class="card-body m-0 p-0">
<div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
<div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
<b>EXAMPLE WEBSITE
<span style="float: right; font-size: 20px;">
<a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<i class="fas fa-expand"></i>
</a>
</span>
</b>
</div>
<div class="card-body" style="padding: 0;">
<iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 m-0 p-0">
<div class="card p-0 m-0" style="border: none;">
<div class="card-body p-0 m-0">
<div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
<div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
<b>EXAMPLE WEBSITE
<span style="float: right; font-size: 20px;">
<a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<i class="fas fa-expand"></i>
</a>
</span>
</b>
</div>
<div class="card-body" style="padding: 0;">
<iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Another possibility is to recompile bootstrap from scss and override padding's and margin's of columns at the source. That would probably be a cleaner solution but a bit more time consuming.
I'm trying to create a rating indicator using bootstrap 4 progress bar. Following is what I'm trying to achieve. However bootstrap progress bar using flex hence I can't align the text in the left and right.
JSFiddle
HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="review__rating__stats">
<span class="review__rating__progress">
<span class="review__rating__level">5 Star</span>
<span class="progress">
<span class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</span>
<span class="review__rating__count">68</span>
</span>
</div>
</div>
</div>
You might have to set a width for .review__rating__count. The "3" was causing the misalignment because it's a single digit, whereas other counts are double digits, which take up more spaces.
Now you can even set .review__rating__stats as flexbox, then use flex: to set a default width for .review__rating__count.
Layout
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="review__rating__stats">
<div class="review__rating__progress">
<strong class="review__rating__level">5 Star</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 68%"
aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<strong class="review__rating__count">68</strong>
</div>
<div class="review__rating__progress" />
...
</div>
</div>
</div>
</div>
Styles
.review__rating__progress {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.review__rating__progress .review__rating__level,
.review__rating__progress .review__rating__count {
/* 10% is the default width for the level and count labels */
flex: 1 1 10%;
}
.review__rating__progress .review__rating__level {
text-align: right;
}
.review__rating__progress .progress {
margin: 0.25rem 1rem;
flex-grow: 8;
}
Result
demo: https://jsfiddle.net/davidliang2008/j4y70wfz/36/
Put each progress bar in row like such:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="container review__rating__stats">
<div class="row review__rating__progress">
<span class="col-sm-2 review__rating__level">5 Star</span>
<div class="col-sm-9 align-self-center">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<span class="col-sm-1 review__rating__count">68</span>
</div>
</div>
</div>
</div>
Note that the div that contains the progress bar must have the align-self-center class otherwise it won't be vertically centered.
I'm trying to use a Bootstrap progress bar as a loading indicator, and I want the progress bar to be a certain width with the whole thing centered in the DIV. But the progress bar doesn't seem to like being centered.
When I do:
<div class="text-center">
<img src="~/Content/Images/loading.gif" style="height:80px;" />
</div>
The image is centered properly. But when I substitute it for a progress bar, it goes to the left:
<div class="text-center">
<div class="progress" style="width:200px;"> <!-- set to certain width -->
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
<span>
Loading...
</span>
</div>
</div>
</div>
Bootply Demo
I want the progress bar to display centered.
This bit of css worked for me.
.progress { margin-left: auto; margin-right:auto; }
Or, you can just use Bootstrap's center-block class
<div class="text-center">
<div class="progress center-block" style="width:200px;"> <!-- set to certain width -->
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
<span>
Loading...
</span>
</div>
</div>
</div>
http://www.bootply.com/a0SXqv3g6N
Just want to enhance the Marcelo answer, for those who are new to CSS (like me)
Remember to check the class in which your progress bar is located:
For me the progress bar was in "download > progress" class like:
<div id="download" class="download">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="main_slider" class="carousel slide banner-main" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h3>Programming languages 1</h3>
<div class="progress" style="width: 50%">
So in my style.css I have added Marcelo answer, below the download css like this
.download {
padding-top: 90px;
padding-bottom: 90px;
background: #fff;
}
.download .progress { margin-left: auto; margin-right:auto; }
and it worked, so do not be afraid of CSS, keep on taking Panga(challenges) with code ;)