Aligning Circles horizontally in Bootstrap - html

I don't have that great over bootstrap yet and cannot figure out how to properly position these circles equally under the title. Any help would be great I've tried many things. I think I've missed something stupid that I should of seen.
HTML
<div class="container">
<div class="row">
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif1"></div>
</div>
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif2"></div>
</div>
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif3"></div>
</div>
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif4"></div>
</div>
</div>
</div>
CSS
#dif1 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(41, 168, 224);
padding-top: 100px;
}
#dif2 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(221, 126, 81);
}
#dif3 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(175, 79, 122);
}
#dif4 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(138, 166, 90);
}


Just Remove padding-top: 100px; property from #dif1 selector
#dif1 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(41, 168, 224);
}
#dif2 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(221, 126, 81);
}
#dif3 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(175, 79, 122);
}
#dif4 {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: white;
background: rgb(138, 166, 90);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif1"></div>
</div>
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif2"></div>
</div>
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif3"></div>
</div>
<div class="col-xs-2 col-md-2 col-lg-2">
<div id="dif4"></div>
</div>
</div>
</div>

Related

Text color changing when hovering below text

I've made 2 boxes that are blue and have a white text color, and when you hover over them, the text color changes from white to blue and the box color changes from blue to white. That part works. But when I hover below the text from the box, the text color changes back to blue even though I'm still with my mouse on the box 'href'.
Have a look at my code:
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
#galaxy {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#galaxy:hover {
background-repeat: no-repeat;
background-color: #FFF;
}
#test {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#test:hover {
background-repeat: no-repeat;
background-color: #F00;
}
.button-title-text {
text-align: center;
color: #FFF;
font-size: 16px;
padding-top: 100px;
}
.button-title-text:hover {
text-align: center;
color: rgb(37, 100, 165);
font-size: 16px;
padding-top: 100px;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
Any help would be appreciated. Thanks in advance.

Consolidated your code and fixed the issue.
You had identical styles for your #galaxy and #test boxes (until they're hovered). I added a class called .box to both of them and moved the styles to that selector.
The issue in your post was occurring because you had a :hover rule on the box itself and the text inside. The hover on the text was behaving as written - it was only activating when you hovered directly over the text.
To fix this, I removed the color: attribute from your .button-title-text element, allowing it to inherit the color from the .box.
Then I added a .box:hover rule that changes the text color, which takes effect when either box is hovered.
Hope this helps!
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
.box {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
.button-title-text {
text-align: center;
font-size: 16px;
padding-top: 100px;
}
.box:hover {
background-color: #FFF;
color: rgb(37, 100, 165);
}
#test:hover {
background-color: #F00;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy" class="box">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test" class="box">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>

HTML - change image inside frame and keep frame size intact

My main goal is to have a simple frame (as you can see) with few text lines and images. The thing I want to do, is make this frame flexible. By that I mean - if I change picture inside of it (bigger -> smaller) the frame should change. It should stay fixed.
Online editor: https://www.bootply.com/Y09Zn1wir3#
HTML:
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
I tried to add height property to such as:
.single-image{
...
height: 405px;
}
Result: https://www.codeply.com/go/2s2hH3nbju
But it doesn't look correct, as bottom text floats somewhere up.
I need a solution for different type of image sizes. Any ideas?

You need to set the height of .img-wrap, too.
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
height: 405px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
height:250px;
overflow:hidden;
}

Try to add this new line in your css code.
.img-wrap{
min-height: 275px;
}
it will looks like this
Output

Try using flex
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
align-self: bottom;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
.images-wrap{
display: flex;
}
.single-image-wrap {
height: 100%;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row images-wrap">
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
</div>

My page doesn't go further down. All the elements I put below go on existing elements

I coded the first part of my page but when I try to go further down the elements don't go below but on existing elements. The page has a huge picture all over it with some text, but I want to put other text below the picture not on it.
.content {
text-align: center;
margin-top: 15%;
color: #fff;
}
h1 {
font-size: 80px;
font-weight: 700;
color: #fff;
}
.under {
font-size: 30px;
margin-top: 15px;
}
.button {
margin-top: 15%;
font-size: 25px;
}
.fa {
font-size: 80px;
}
.button {
padding: 20px 10px;
background-color: orange;
border-radius: 15px;
}
body {
background-image: url(https://source.unsplash.com/bmnuRawqdsI);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html {
width: 100%;
height: 100%;
}
.body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 48, 56, 0.5);
background: rgba(44, 48, 56, 0.5);
color: rgba(44, 48, 56, 0.5);
}
<div class="body">
<div class="container">
<div class="content">
<i class="fa fa-coffee" aria-hidden="true"></i>
<h1>You Order. We Deliver.</h1>
<p class="under">Get Coffee In 3 Easy Steps.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p class="button">Order A Coffee</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>How It Works.</h1>
<div class="row">
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
<p>Order any coffee from one of our many brands.</p>
</div>
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
</div>
<div class="col-lg-4 col-md4 col-sm-4 col-xs-12">
</div>
</div>
</div>

Progress step tracker does not scale down in size

I am making a progress step tracker, like the type you'd see in multi-page forms, using CSS and Bootstrap and I am having issues with it scaling down to different screen sizes.
When I move to certain smaller screen sizes, I am having issues with the bars between the steps moving further left then their steps.
My markdown:
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>
And my style sheet:
.work-order-progress {
.div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
:not(.first-item) {
.step-number:before {
width: 85%;
height: 5px;
content: '';
position: absolute;
top: 10px;
left: -87px;
z-index: -1;
border-radius: 25px
}
}
.step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.fill {
.step-number {
color: #ffffff;
background: #22a925;
}
.step-number:before {
background-color: #22a925;
}
}
:not(.fill) {
.step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.step-number:before {
background-color: #ededed;
}
}
}
I am conditionally adding the class that makes it active based on business logic, which is removed in this example.

I built a live demo here:
.work-order-progress .div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.work-order-progress>div{
}
.work-order-progress .step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
.work-order-progress :not(.first-item) .step-number:before {
width: calc(100% - 35px);
height: 5px;
content: '';
position: absolute;
top: 10px;
left: calc(-50% + 15px);
z-index: -1;
border-radius: 25px;
}
.work-order-progress .step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.work-order-progress .fill .step-number {
color: #ffffff;
background: #22a925;
}
.work-order-progress .fill .step-number:before {
background-color: #22a925;
}
.work-order-progress :not(.fill) .step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.work-order-progress :not(.fill) .step-number:before {
background-color: #ededed;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>

Trouble with a checkbox inside a div with a dynamic height, how to do?

I've got a lot of trouble with getting my checkboxes vertical aligned in my divs with a dynamic height.
I have some of my view:
<div class="col-md-7">
<div class="row recent-information">
<div class="product-navigation">
<div class="product-header-text">
<div class="col-md-3 product-details">
<p>Product name</p>
</div>
<div class="col-md-4 product-details">
<p>Note</p>
</div>
<div class="col-md-2 product-details">
<p>Price</p>
</div>
<div class="col-md-2 product-details">
<p>Stock</p>
</div>
</div>
</div>
#foreach (var item in Model.Products)
{
<div class="product-header">
<div class="product-header-text">
<div class="col-md-3 product-details-entity">
<h6>#item.Name</h6>
</div>
<div class="col-md-4 product-details-entity">
<h6>#item.Description</h6>
</div>
<div class="col-md-2 product-details-entity">
<h6>#item.Price DKK</h6>
</div>
<div class="col-md-1 product-details-entity">
<h6>#item.Stock</h6>
</div>
<div class="col-md-1 product-details-checkbox">
#Html.CheckBox("naem", new { #class = "products-checkbox" })
</div>
</div>
</div>
}
</div>
</div>
And the style:
.product-header {
min-height: 7%;
min-width: 100%;
margin-bottom: 3px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.product-header-text {
width: 98%;
margin-left: 10px !important;
margin-right: 10px !important;
float: left;
font-weight: 700 !important;
margin-bottom: 3px;
height: 100%;
}
.product-details {
font-weight: 500 !important;
margin-top: 13px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
height: auto;
min-height: 100%;
}
.product-details-entity {
margin-top: 20px;
height: auto;
}
input[type="checkbox"] {
background: #f8f8f5;
-webkit-appearance: none;
height: 22px;
width: 22px;
margin-top: 20%;
cursor: pointer;
margin-left: 65px;
}
input[type="checkbox"]:checked {
background-image: url("../Images/checkmark2.png");
height: 22px;
width: 22px;
}
My problem is, that my divs, the product-details are dynamically based on the content from the database, and I can't get my checkboxes to follow.