Creating square responsive box with 4 elements per row - html

MARKUP::
<div class="alumni">
<div class="alumni-list col-xs-3">
<div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}">
</div>
</div>
<div class="alumni-list col-xs-3">
<div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}">
</div>
</div>
<div class="alumni-list col-xs-3">
<div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}">
</div>
</div>
<div class="alumni-list col-xs-3">
<div class="innerBg" ng-style="{'background':'url('../dummyimage.png')'}">
</div>
</div>
</div>
CSS::
.alumni {
max-height: 280px;
padding: 10px;
overflow: auto;
}
.alumni-list {
text-align: center;
margin-bottom: 10px;
padding: 0px 5px;
}
.innerBg {
height: 56px;
max-width: 56px;
background-size: cover;
border-radius: 4px;
background-position: center center !important;
}
alumni container contains 4 alumni-list. Irrespective of screen size, all alumni-list should come in square shape. This is what I tried so far and I'm using bootstrap 3.

Related

How can I ensure that the top container only takes up as much space as the inner elements in all conditions?

<style>
.container{
background-color: lightgray;
text-align: center;
display: inline-block;
position: relative;
border-radius:5px;
}
.itemField{
margin-top:10px;
}
.item {
margin: 10px;
width: 20em;
vertical-align: top;
display:inline-block;
}
.itemInner {
width: 20em;
height: 5em;
margin: 0 auto;
padding: 0.83333333em;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
text-align: left;
position: relative;
white-space: normal;
}
.itemInnerList{
width:fit-content;
background-color: beige;
}
</style>
<div class="container">
<div class="itemInnerList">
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 1
</div>
</div>
</div>
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 2
</div>
</div>
</div>
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 3
</div>
</div>
</div>
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 4
</div>
</div>
</div>
</div>
</div>
how can i make sure "itemInnerList" is just wide enough to wrap inner elements in all cases.
itemInnerList container shows like it's wide is 100% , not covers only inner elements .
i draw the boundry in image which i try to make.
i try to make container width, covers only inner elements in all screen width
enter image description here

Horizontally and vertically centered image within a circle within another circle in Bootstrap 4

I'm trying to accomplish something that looks like this, using Bootstrap 4 and css:
What I have so far is this css:
.inner-circle {
display: block;
height: 70px;
width: 70px;
line-height: 70px;
-moz-border-radius: 50%; /* or 50% */
border-radius: 50%; /* or 50% */
background-color: #d2e4ff;
text-align: center;
font-size: 2em;
}
.outer-circle {
display: block;
height: 90px;
width: 90px;
line-height: 90px;
-moz-border-radius: 50%; /* or 50% */
border-radius: 50%; /* or 50% */
background-color: #e7f1ff;
text-align: center;
font-size: 2em;
}
and then this html:
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-sm-6">
<div class="row" class="h-100">
<div class="col-sm-2 h-100">
<span class="outer-circle mx-auto my-auto">
<span class="inner-circle mx-auto my-auto">
<img src="images/breakfast.svg" height="40" width="40" />
</span>
</span>
</div>
<div class="col-sm-10 my-auto">
<h4 class="display5">Cool stuff</h4>
</div>
</div>
</div>
<div class="col-sm-6"></div>
</div>
</div>
That gets me here:
Which is not quite what I want. I have been unsuccessful with trying to get the image centered within the inner circle and then the inner circle centered within the outer circle. Is this something that is easily achievable, or should I just try to make the whole thing as an image and then just insert that image?

You can use flex to center align vertically and horizontally.
.inner-circle {
display: flex;
align-items: center;
justify-content: center;
height: 70px;
width: 70px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #d2e4ff;
}
.outer-circle {
display: flex;
align-items: center;
justify-content: center;
height: 90px;
width: 90px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #e7f1ff;
}
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-sm-6">
<div class="row" class="h-100">
<div class="col-sm-2 h-100">
<span class="outer-circle mx-auto my-auto">
<span class="inner-circle mx-auto my-auto">
A
</span>
</span>
</div>
<div class="col-sm-10 my-auto">
<h4 class="display5">Cool stuff</h4>
</div>
</div>
</div>
<div class="col-sm-6"></div>
</div>
</div>

A number of ways to do this. This uses absolute positioning for the inner circle.
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
height: 70px;
width: 70px;
line-height: 70px;
-moz-border-radius: 50%;
/* or 50% */
border-radius: 50%;
/* or 50% */
background-color: #d2e4ff;
text-align: center;
font-size: 2em;
}
.outer-circle {
display: block;
height: 90px;
width: 90px;
line-height: 90px;
position: relative;
-moz-border-radius: 50%;
/* or 50% */
border-radius: 50%;
/* or 50% */
background-color: #e7f1ff;
text-align: center;
font-size: 2em;
}
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-sm-6">
<div class="row" class="h-100">
<div class="col-sm-2 h-100">
<span class="outer-circle mx-auto my-auto">
<span class="inner-circle mx-auto my-auto">
<img src="https://www.iconsdb.com/icons/preview/tropical-blue/stackoverflow-6-xxl.png" height="40" width="40" />
</span>
</span>
</div>
<div class="col-sm-10 my-auto">
<h4 class="display5">Cool stuff</h4>
</div>
</div>
</div>
<div class="col-sm-6"></div>
</div>
</div>

same img size in a row /// col-8 <-> col-4

I am absolute newbee and wanna create 2 rows. One with 2 img col-4 size and col-8 size and the other row à 3 x col-4 size.
My problem is that the col-8 img is a little bit bigger (height) then the col-4 img.
How can I fix it? I tried a lot but nothing worked.
Thanks for your help.
[problem
.col-4 {
padding-left: 5px;
padding-right: 5px;
}
.col-8 {
padding-left: 5px;
padding-right: 5px;
}
.x1 {
border: 1px solid black;
}
.x2 {
border: 1px solid black;
}
.x1_pic {
width: 100%;
height: auto;
position: relative;
}
.x2_pic {
width: 100%;
height: auto;
position: relative;
}
.x1_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
.x2_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-8">
<div class="x2">
<img class="x2_pic" src="./img/maschine_2.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
</div>
</div>
]1

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.

Full height column bootstrap 3

I'm trying to each this effect:
What I've developed till now:
http://wedevelop.net63.net/j/
I can't manage to use bootstrap to stick the "RED" div to the footer.
Any tips?
Here is the code:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3">
<div class="table-content-container row">
<div class="main-content">
<h1>Take 10 off any purchase of 50 or more at Gamestop</h1>
<div class="row">
<div class="col-md-6"><img src="images/GameStop.png"/></div>
<div class="col-md-6"><span>Code:</span><span>play10</span></div>
</div>
<p>1. Enter the email you use on Jifity 2. Share this coupon on Facebook 3. Your coupon is activated 4. Apply your savings to any gift</p>
<input class="center-block email-field form-control" type="text" value="Enter Your E-mail" />
<div class="row">
<div class="btn share-btn"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3">
<div class="table-content-container row">
<div class="mobile-ad-content">
<h2>Ready to download your Coupon?</h2>
<p class="download-phrase">Download right now</p>
<div class="row stores-logos">
<div class="col-xs-6"><div class="btn btn-success right">Apple</div></div>
<div class="col-xs-6"><div class="btn btn-success">Google</div></div>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
LESS Code:
#content {
text-align: center;
height: 90%;
.table-content-container {
display: table;
}
.main-content {
background: url('../images/content_whitebg.png') no-repeat;
background-size: cover;
display: table-cell;
h1 {
margin-left: 20%;
margin-right: 20%;
padding-top: 2em;
font-size: 2em;
margin-bottom: 1em;
}
.gamestop-logo {
background: url('../images/GameStop.png') no-repeat;
}
p{
padding-bottom: 1.2em;
padding-top: 1.2em;
font-size: 0.7em;
margin-top: 2em;
}
.email-field {
margin-bottom: 1.5em;
width: 92%;
}
.share-btn {
background: url('../images/share.png') no-repeat;
width: 100px;
height: 38px;
margin-bottom: 2em;
}
}
.mobile-ad-content {
background: url('../images/content_redbg.png') no-repeat;
background-size: cover;
display: table-cell;
color:white;
text-align: center;
h2 {
padding-top: 2em;
margin: 1em;
}
p{
font-weight: bold;
}
.stores-logos {
padding-bottom: 2em;
}
}
}