Hi guys can you help me how to create a the design I made in Photoshop. I actually used col-md-6 to make it two columns. but the problem is that making on div height is bit taller than the other. Here is the image I am talking about
<div class="col-md-6" class="white">
<h1>LOGISTIC</h1>
</div>
<div class="col-md-6" class="ship">
</div>
<div class="col-md-6" class="black">
<h1>DELIVERY</h1>
</div>
<div class="col-md-6" class="pipe">
</div>
<div class="col-md-6" class="white">
<h1>STORAGE</h1>
</div>
<div class="col-md-6" class="tank">
</div>
css
.ship{
background: url(../img/resources/ship.png);
}
.tank{
background: url(../img/resources/tank.png);
}
.pipe{
background: url(../img/resources/pipe.png);
}
Please Help I am stock here, thanks in advance
Make sure that you specify the height in all your classes below:
.ship{
height: /*set the height of ship.png*/
background-image: url(../img/resources/ship.png);
}
.tank{
height: /*set the height of tank.png*/
background-image: url(../img/resources/tank.png);
}
.pipe{
height: /*set the height of pipe.png*/
background-image: url(../img/resources/pipe.png);
}
Related
I want to put a .well div (or a button whatever), in the green area of this picture:
here
Here is my code for now:
<div class="container-fluid">
<div class="row row1" style="height: 400px;">
<div class="col-lg-4 col-lg-offset-1">
aaaa <!-- BUTTON OR WELL HERE -->
</div>
</div>
css:
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
Problem, if I try this code:
<div class="container-fluid">
<div class="row row1" style="height: 400px;">
<div class="col-lg-4 col-lg-offset-1">
<div class="well well-sm">aaa
</div>
</div>
I obtain this result:
here
How can I put the .well div inside the green area (and have its height and width inferior than the green area ones)?
I am not exactly sure of what you are asking but... keep in mind the bootstrap col sizes. If you use lg it will get confused if the screen gets smaller than the lg size. Better then to use xs if you don't want to declare the other sizes.
Also, don't do inline css.
Is this what you are looking for?
Fiddle here
HTML:
<div class="container-fluid">
<div class="row backgroundPicHere">
<div class="col-xs-4 col-xs-offset-1 green">
<div class="well">Basic Well</div>
</div>
</div>
</div>
CSS:
.backgroundPicHere {
top: 20px;
height: 200px;
background: red;
}
.green{
background: green;
height: 200px !important;
}
.green .well{
position: relative;
top: 50%;
transform: translateY(-50%);
}
PS. Use any way you deem fitting for the vertical centering of the well. This is just one of many... some might disapprove. DS
EDIT: Correcting code indentation
I'm not going to try to explain this in words, just have a look at this fiddle:
https://jsfiddle.net/fhf8rwno/4/
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
In either Chrome or Firefox (possibly other browsers too), watch the red column as you resize the browser width. You should notice that on every other change in browser side a one-pixel-wide gap appears at the right edge of the parent container, allowing the parent background to come through.
If I instead use col-xs-6 instead of col-xs-7 and col-xs-5, the issue disappears. So it seems the browser's pixel math may cause this due to the odd/even mix of column ratios.
This may not seem like much, but the site I'm working on uses this pattern a lot and half the users are seeing some very noticeable and unsightly dark lines.
Any thoughts or suggested hacks?
Edit: here's a hacky way of achieving this. http://jsfiddle.net/fhf8rwno/8/
CSS
.row.no-gutter {
margin-left: 0;
margin-right: 0
}
.row.no-gutter [class*='col-'],
.row.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red; position: relative; right: -1px;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
A colleague and I have come to a semi-solution, but I'm not going to accept this answer just yet in case someone comes up with something less hack-y.
Shifting the last column's margins by one seems to help the issue:
.row.no-gutter [class*='col-']:last-child {
margin-right:-1px;
margin-left:1px;
}
https://jsfiddle.net/fhf8rwno/6/
I'm using Boostrap 3 and have a problem with backgrounds on elements that appear too wide. The container is in desktop mode 1170px and has 15px padding left and right which makes the content appear with 1140px width.
When I'm adding an element with a different background color (let's say body + .container both has same background), then the element will appear as 1170px wide due to the background showing in the padding area as well.
I could add CSS for each element with deviating background in each screen width (media queries) to solve the problem. But I hope there is a better way to achieve this since I can't be the only person with this problem. Does anyone know some Boostrap class / function to solve this issue, or know some best practise for this?
Try wrapping the rows and/or inner content, you can see how I have done it here; http://jsfiddle.net/w7wowg94/
HTML
<div id="master-wrap">
<div class="container">
<div class="wrap-class-one">
<div class="row">
<div class="col-md-6">Content 1</div>
<div class="col-md-6">Contnent 2</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<div class="inner-wrap">Content 1</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
</div>
</div>
</div>
CSS
#master-wrap {
margin: 0 auto;
background-color: #eee;
padding: 15px;
}
.wrap-class-one {
background-color: #ccc;
padding: 15px;
}
.inner-wrap {
padding: 15px;
background-color: #ccc;
}
I've been wresting with this for a couple of hours now and am not making progress. Thought I would come here for help. My task is simple and common. Using BS3, I am trying to have a full page container have a background image which will resize when you resize the browser. Seems simple enough but the few solutions I've found on here simply don't work. Here's where I'm at:
<section id="LandingRow">
<div class="LandingRowWrapper">
<div class="container-fluid">
<div class="row">
<%--Visible in small, med, large devices.--%>
<div class="col-sm-6 col-sm-offset-6 hidden-xs">
<div class="row">
...content...
</div>
<div class="row">
...content...
</div>
</div>
<%--Visible in xs devices only.--%>
<div class="col-sm-12 visible-xs">
...content...
</div>
</div>
</div>
</div>
...and my css....
.LandingRowWrapper
{
border-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-color: #bbd8e7;
background-color: #ffffff;
background-image: url('../images/slider3.jpg');
}
Much appreciated!!
If you want the background to cover both the height and width of the container, I would use background-size: cover;. If you want it to just scale horizontally and keep the height proportionate background-size: 100;% should do the trick.
I have rectangular, not necessarily square images.
Using Bootstrap's img-circle, I'd like to get circular crops, not elliptical/non-circular crops of these rectangular images.
How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.
JSFiddle to illustrate the non-circular behavior of non-square img-circle images.
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-12">img-circle test</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/400" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/400/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />
</div>
</div>
</div>
I see that this post is a little out of date but still...
I can show you and everyone else (who is in the same situation as I was this day) how i did it.
First of all, you need html like this:
<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>
Than your css class will look like this:
div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;
/* make it a circle */
border-radius:50%;
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
It is responsive circle, centered on original image.
You can change width and height not to autofill its parent if you want.
But keep them equal if you want to have a circle in result.
Link with solution on fiddle
I hope this answer will help struggling people. Bye.
I use these two methods depending on the usage. FIDDLE
<div class="img-div">
<img src="http://placekitten.com/g/400/200" />
</div>
<div class="circle-image"></div>
div.img-div{
height:200px;
width:200px;
overflow:hidden;
border-radius:50%;
}
.img-div img{
-webkit-transform:translate(-50%);
margin-left:100px;
}
.circle-image{
width:200px;
height:200px;
border-radius:50%;
background-image:url("http://placekitten.com/g/200/400");
display:block;
background-position-y:25%
}
You stated you want circular crops from recangles. This may not be able to be done with the 3 popular bootstrap classes (img-rounded; img-circle; img-polaroid)
You may want to write a custom CSS class using border-radius where you have more control. If you want it more circular just increase the radius.
.CattoBorderRadius
{
border-radius: 25px;
}
<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />
Fiddle URL: http://jsfiddle.net/ccatto/LyxEb/
I know this may not be the perfect radius but I think your answer will use a custom css class. Hope this helps.
use this in css
.logo-center{
border:inherit 8px #000000;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
}
<img class="logo-center" src="NBC-Logo.png" height="60" width="60">
You have to give height and width to that image.
eg. height : 200px and width : 200px
also give border-radius:50%;
to create circle you have to give equal height and width
if you are using bootstrap then give height and width and img-circle class to img
the problem mainly is because the width have to be == to the height, and in the case of bs, the height is set to auto so here is a fix for that in js instead
function img_circle() {
$('.img-circle').each(function() {
$w = $(this).width();
$(this).height($w);
});
}
$(document).ready(function() {
img_circle();
});
$(window).resize(function() {
img_circle();
});
You Need to take same height and width
and simply use the border-radius:360px;
You could simply use .rounded-circle bootstrap.
<img class="rounded-circle" src="http://placekitten.com/g/200/200"/>
You can even specify the width and height of the rounded image by providing an inline style to the image, which overrides the default size.
<img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />