bootstrap issue: image overflow

bootstrap issue: image overflow - css

here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks

Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}

you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>

Related

How to center the object with lightbox using bootsrap?

I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>

Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">

This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">

Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row

Bootstrap: wrapping text

I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?

Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>

It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}

Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>

It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>

Set background color for div in bootstrap

I've image need code css:
And here my html
<div class="row dvMarTop1">
<div class="col-sm-6" >
<div class="row">
<div class="col-sm-7" >
<img src="images/img230.jpg" class="img-responsive" />
</div>
<div class="col-sm-5" style="background-color: #f1f1f1;">
<div>
<div>Tiêu điểm</div>
<div>Mark Zuckerberg thất vọng vì vệ tinh 200 triệu USD bị tên lửa SpaceX thiêu rụi</div>
</div>
</div>
</div>
<div class="row dvMarTop1" style="background-color:#fff">
<div class="col-sm-4">
<img src="http://imgur.com/79u89Sj" class="img-responsive" />
</div>
<div class="col-sm-8">
<span>
Nghệ An: Cá chết dạt do thuyền chở cá chìm
<font><i class="fa fa-clock-o dvMarTop1 dvTimeItem"></i> 20:00 | Chủ nhật, 15/06/2016</font>
</span>
</div>
</div>
</div>
But as you see I cannot set full background for col-sm-5 and set vertical center text
Can you suggest more ? tks so much

Either you didn't refresh your browser page after you edited the code or you didn't place your style.css under the other CSS links in the head part of the code.

Layout has wide rows when browser width is smaller

here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks

Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.

If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options

Bootstrap padding on inner borders but not edge of browser

I'm new at bootstrap and trying to place a simple grid of images on the webpage. I'd like borders between the images but NOT the edges of the browser. By default bootstrap puts padding on all 4 sides of the col-md elements.
I cant 'hardcode' the padding since the cells change position when the browser size changes according the responsive design. Is there a way for bootstrap to automatically only add padding to the insides?
HTML
<div class="row">
<div class="col-md-8">
<img src="~/Content/images/saucer.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/metalbranch.jpg" />
</div>
</div>
<div class="row" >
<div class="col-md-4">
<img src="~/Content/images/moon.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/peacockOnWood.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/appleGlass.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="~/Content/images/pianoKeysNecklace.jpg" />
</div>
<div class="col-md-8">
<img src="~/Content/images/treeWithNecklace.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<img src="~/Content/images/gridOfCorks.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/trees.jpg" />
</div>
</div>
CSS
.col-md-4 img, .col-md-8 img {
width:100%;
margin: 20px 0 0 0;
padding: 0;
}

Have a look here : http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
So it should be something like :
<div class='container'>
<div class='row'>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>