Sorry for bad title but couldn't think of anything better.
I have this progress bar created with Bootstrap, and images and paragraphs oer and under. But when I try to resize the window (lower it), it changes positions and suddenly wrecks everything. I need it the imgs and paragraphs to stand exactly same positions as the width of the progress bar.
<div>
<p style="display:inline-block;">0</p>
<p style="margin-left:23.6%;display:inline-block;">800</p>
<p style="margin-left:1.9%;display:inline-block;">950</p>
<p style="margin-left:1.9%;display:inline-block;">1100</p>
<p style="margin-left:1.9%;display:inline-block;">1250</p>
<p style="margin-left:1.9%;display:inline-block;">1400</p>
<p style="margin-left:1.9%;display:inline-block;">1550</p>
<p style="margin-left:1.9%;display:inline-block;">1700</p>
<p style="margin-left:1.9%;display:inline-block;">1850</p>
<p style="margin-left:1.9%;display:inline-block;">2000</p>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
<div class="progress" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
<div class="progress-bar" role="progressbar" aria-valuenow="'#ViewBag.EloWidth'"
aria-valuemin="0" aria-valuemax="3000" style="width:#ViewBag.EloWidth%;background-color:#6378ff;">
</div>
</div>
</div>
<div>
<img src="/Images/lvl1.png">
<img src="/Images/lvl2.png" style="margin-left:21%;">
<img src="/Images/lvl3.png" style="margin-left:1.3%;">
<img src="/Images/lvl4.png" style="margin-left:1.9%;">
<img src="/Images/lvl5.png" style="margin-left:2.2%;">
<img src="/Images/lvl6.png" style="margin-left:2.3%;">
<img src="/Images/lvl7.png" style="margin-left:2.3%;">
<img src="/Images/lvl8.png" style="margin-left:2.3%;">
<img src="/Images/lvl9.png" style="margin-left:2.3%;">
<img src="/Images/lvl10.png" style="margin-left:2.3%;">
</div>
You are not using bootstrap for the rest of your layout (the labels and icons). Try this one:
<div class="row">
<div class="col-3">
<p>0</p>
</div>
<div class="col-1">
<p>800</p>
</div>
<div class="col-1">
<p>950</p>
</div>
<div class="col-1">
<p>1100</p>
</div>
<div class="col-1">
<p>1250</p>
</div>
<div class="col-1">
<p>1400</p>
</div>
<div class="col-1">
<p>1550</p>
</div>
<div class="col-1">
<p>1700</p>
</div>
<div class="col-1">
<p>1850</p>
</div>
<div class="col-1">
<p>2000</p>
</div>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
<div class="progress col-12" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
<div class="progress-bar" role="progressbar" aria-valuenow="'#ViewBag.EloWidth'"
aria-valuemin="0" aria-valuemax="3000" style="width:#ViewBag.EloWidth%;background-color:#6378ff;">
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="/Images/lvl1.png">
</div>
<div class="col-1">
<img src="/Images/lvl2.png">
</div>
<div class="col-1">
<img src="/Images/lvl3.png">
</div>
<div class="col-1">
<img src="/Images/lvl4.png">
</div>
<div class="col-1">
<img src="/Images/lvl5.png">
</div>
<div class="col-1">
<img src="/Images/lvl6.png">
</div>
<div class="col-1">
<img src="/Images/lvl7.png">
</div>
<div class="col-1">
<img src="/Images/lvl8.png">
</div>
<div class="col-1">
<img src="/Images/lvl9.png">
</div>
<div class="col-1">
<img src="/Images/lvl10.png">
</div>
</div>
This is a helpful guild about the Bootstrap Grid System. You might also use a class="col-12" for your progress bar.
EDIT: Working Plunker for Bootstrap4:
Plunker BS 4
EDIT2: Working Plunker for Bootstrap3:
Plunker BS 3
Related
I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
I'm working on an angular app and the UI has several .card blocks, but as I keep adding them to the Html, they disappear in the bottom of the page, I was expecting that as I keep adding them a scroll bar would appear in the page, could someone help me with that?
<div class="content-area">
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
the main-container is in another component
<div class="main-container">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</div>
Ok even though my app.component already has a class="main-container, putting another one to this Html, also I was missing the class="content-container", with these two now is working
<div class="main-container">
<div class="content-container">
<div class="content-area">
<h1>
SHPO Response
</h1>
<div class="content-area">
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
I was making a layout to create an image grid using Zurb Foundation 6.4.3 XY Grid's Card Component. All my images are actually 320x180 px in dimension. But when I am running the following Code images are getting stretched.
I am new in CSS3 Flexbox and Foundation XY Grid and not being able to find out what is happening here. I will be grateful if someone help me to find out a solution.
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
Add align-self to your img (the stretching happens as the align-items property is stretch by default in the flex direction). You can also add align-items: center to your card.
If so needed, you can throw in a width: 100% too for the img (for the image to scale evenly) - see demo below:
.card img {
align-self: center;
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css' />
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
A foundation based solution would be to use:
Use grid-x and align-center for the grid wrapper.
Use the following markup for cell:
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
See demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css">
<div class="grid-container">
<div class="grid-x align-center">
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
</div>
</div>
I have made a HTML page with css animation and transitions
<div class="container-fluid" id="team">
<div class="row first">
<div class="wrapper"></div>
</div>
<div class="row second">
<div class="wrapper"></div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.0.name}}</h2>
<h5>{{team.0.position}}</h5>
<p>{{team.0.description}}</p>
Learn more about {{team.0.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.6.name}}</h2>
<h5>{{team.6.position}}</h5>
<p>{{team.6.description}}</p>
Learn more about {{team.6.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper"></div>
</div>
<div class="row third">
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.3.name}}</h2>
<h5>{{team.3.position}}</h5>
<p>{{team.3.description}}</p>
Learn more about {{team.3.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.2.name}}</h2>
<h5>{{team.2.position}}</h5>
<p>{{team.2.description}}</p>
Learn more about {{team.2.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.4.name}}</h2>
<h5>{{team.4.position}}</h5>
<p>{{team.4.description}}</p>
Learn more about {{team.4.firstName}}
</div>
</div>
<img src="">
</div>
</div>
<div class="row fourth">
<div class="wrapper"></div>
<div class="wrapper clickable">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.5.name}}</h2>
<h5>{{team.5.position}}</h5>
<p>{{team.5.description}}</p>
Learn more about {{team.5.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.1.name}}</h2>
<h5>{{team.1.position}}</h5>
<p>{{team.1.description}}</p>
Learn more about {{team.1.firstName}}
</div>
</div>
<img src="">
</div>
<div class="wrapper"></div>
</div>
<div class="row fifth">
<div class="wrapper"></div>
<div class="wrapper join">
<a href="">
<span>+ Join</span>
</a>
</div>
<div class="wrapper clickable right-side">
<div class="shadow"></div>
<div class="description">
<div>
<h2>{{team.7.name}}</h2>
<h5>{{team.7.position}}</h5>
<p>{{team.7.description}}</p>
Learn more about {{team.7.firstName}}
</div>
</div>
<img src="">
</div>
</div>
<div class="row sixth">
<div class="wrapper"></div>
<div class="wrapper blank"></div>
<div class="wrapper"></div>
</div>
<div class="row seventh">
<div class="wrapper"></div>
<div class="wrapper"></div>
</div>
Full working version is avaliable here: http://jsfiddle.net/xs4mm5jd/
As you can see it works fine and animations is fast and smooth.
However, when I added some images: http://jsfiddle.net/xs4mm5jd/1/ animation is glichy. Is there any solution to speed up the performance?
Even though I don't see bad performance in your fiddle, you can trigger hardware acceleration when animating.
Some people use a sort of hack applying either transform: translateZ(0); or transform: translate3d(0, 0, 0); to the animated elements.
Here you have a fiddle to test if you see any performance gain: http://jsfiddle.net/gleezer/xs4mm5jd/3/
Here's an article about it.
A second, newer (and probably better) alternative is to use the will-change property in your CSS, for example: will-change: transform;
Read more about it here.