I can't find documentation on how to adjust the progress bar width. I want to make the progress bar only take up about 1/4 of a row. Not the entire full length of the page.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Target .progress instead of .progress-bar
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="progress" style="width: 25%;">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Related
This maybe easy but it feels more tricky for me to display 3 images in a row with responsive layout by using bootstrap
I want to create a page in my website with something like this -
Here's what I want to achieve in my website's gallery page
https://www.avivabaig.com/portraits
You can easily create your example site structure using bootstrap, visit this site for more info: https://www.w3schools.com/bootstrap/
.image-box img {
width: 100%;
height: auto;
object-fit: cover;
}
.image-box {
max-height: 235px;
overflow: hidden;
height: 100%;
margin: 50px 0;
}
<html><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body><div class="container">
<div class="row">
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=967&q=80" alt="">
</div>
</div><div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
</div>
</div></body></html>
My sketch of it, using the scripts and stylesheets for Bootstrap 4.0.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_078200849e0545229d2016399b977003~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_fb68b3206eea49008cf9b17fd8382041~mv2.jpg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/IMG-4811.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_01c000ce3450418ea4fcc20e3ed38a45~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
</div>
</div>
</body>
</html>
Above the complete file to copy/paste, below the snippet to run and test:
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
.col-sm-4 img{margin-top:20px;margin-bottom:20px}/* just to make the snippet clearer */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_078200849e0545229d2016399b977003~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_fb68b3206eea49008cf9b17fd8382041~mv2.jpg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/IMG-4811.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_01c000ce3450418ea4fcc20e3ed38a45~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
</div>
</div>
</body>
Check the options for the syntax, since you may even prefer to use a col-xs-4 class rather than col-sm-4 or other.
How do I do something like this with Bootstrap 4?
The easiest way:
<div class="row">
<div class="col-md-6">Card-1</div>
<div class="col-md-6">Card-2</div>
</div>
Or you can also use "flex"
<div class="d-flex justify-content-between">
<div class="">Card-1</div>
<div class="">Card-2</div>
<div class="">Card-3</div>
</div>
---OR---
<div class="d-flex justify-content-around">
<div class="">Card-1</div>
<div class="">Card-2</div>
</div>
.twoCard {
display: flex;
}
.cardPart {
width: 100%;
padding: 10px;
}
.cardPart2 {
border-left: 1px solid #ccc;
}
<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="card" style="width: 18rem;">
<div class="twoCard">
<div class="cardPart cardPart1">Card Part 1</div>
<div class="cardPart cardPart2">Card Part 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I divided two part using flex css.
I'm trying to make a progress bar start moving when you click a button in only HTML. How would I do this? Is this impossible? I just started coding with HTML (literally today), and I need some help with this.
Here's what I have right now:
<input type="image" src="Button.png" name="saveForm" style = "position:absolute; left:480px; top:400px" />
Thank you for any help.
You can add a progress bar simply through Bootstrap.
Add this to your HTML code:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
Declare this in the head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Declare this in the last part of the body:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I'm trying to do some simple prototyping with an HTML page and bootstrap. I first tried using the CDN then switched to the local version, and neither time was I able to get the 'row' class to work properly; the content still stacks over each other rather than next to each other.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Stoodigo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<ul id="list-1">
<li id="listItem-1">
<input id="input-1" /><button class="addBtn"></button><button class="divertBtn"></button>
</li>
</ul>
</div>
<div class="col-6">
<textarea name="name" rows="8" cols="80"></textarea>
</div>
</div>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
I'm expecting the elements to align next to each other.
Using the CDN from the docs I was able to get the columns to create the way you intended. Please see my examples below.
This is a link to the documentation explaining columns and the grid system here.
Example from docs,
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Here is a working example using your HTML but the only change is I added the CDN from the Bootstrap docs which you can find here.
CDN
JS
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Stoodigo</title>
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<ul id="list-1">
<li id="listItem-1">
<input id="input-1" /><button class="addBtn"></button><button class="divertBtn"></button>
</li>
</ul>
</div>
<div class="col-6">
<textarea name="name" rows="8" cols="80"></textarea>
</div>
</div>
</div>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
<div class="row">
<div class="col-sm-6">
col one
</div>
<div class="col-sm-6">
col two
</div>
</div>
Hey guys, I'm using bootstrap for my website. But it's not working fine in safari. Do you guys know why is that happening?
This ( Bootstrap v4.0.0 (https://getbootstrap.com) ) the version bootstrap i'm using. Please help thanks.
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Need to have this in your head on your HTML page.