materialize image without margin - css

I'm having an image inside a div. Underneath it is a margim. I tried with firebug to look at the div code and img, but I did not find anything declared with magin and padding.
<div class="row">
<div class="col s4">
<img class="responsive-img" src="imagem/IMG_8380.jpg" alt=""/>
</div>
<div class="col s4">
<img class="responsive-img" src="imagem/IMG_8265.jpg" alt=""/> </div>
<div class="col s4">
<img class="responsive-img" src="imagem/IMG_8711.jpg" alt=""/>
</div>
</div>

Been there. Set img {display:block;}

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

how to float right card-body for screen sizes over 1280 using bootstrap?

Using Bootstrap cards, I'm trying to float a card-img left and the card-body right, but the float classes aren't working for me. Can anyone tell me what I'm doing wrong please?
<div class="container">
<div class="row row-eq-height">
<div class="col">
<div class="card" style="">
<img class="card-img-top" style="width: 33%; float: left;" src="img/myimg.jpg" ">
<div class="card-img-caption">caption here</div>
<div class="card-body float-xl-right">
<h5 class="card-title">Title here</h5>
<p>By A Person</p>
<p class="card-text">When in the course of human events...</p>
Link
</div>
</div>
</div>
</div>
</div>
Is your xl breakpoint is set to 1280? Because if yes, then you could just use flex-xl-row class on card element and wrap image & caption inside a div, so they stay together:
<div class="card flex-xl-row">
<div>
<img class="card-img-top" src="img/myimg.jpg">
<div class="card-img-caption">caption here</div>
</div>
<div class="card-body">
<h5 class="card-title">Title here</h5>
<p>By A Person</p>
<p class="card-text">When in the course of human events...</p>
Link
</div>
</div>
It had to do with the .card class having a display of flex. Once that was removed, I could float the content left or right.

bootstrap issue: image overflow

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>

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>

twitter bootstrap images grid

I am using twitter bootstrap and I would like to create a grid that will shrink according to the width of the screen and move it cells down. Right now I managed to create a grid like this: http://jsfiddle.net/D2RLR/3179/.
The problem is that the grid is not aligned very well and if I shrink the window the images are getting smaller instead of moving to the next row.
Is there any well knows practice to do that?
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="search" class="well form-search search">
<input id="search-term" type="text" placeholder="Type search term">
<button id="search-button" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="grid" class="span9">
<div class="span3">
<img class="img-polaroid" src="http://lh5.googleusercontent.com/public/zSxr-JuTje4AqFmN8zOFNcRaRm7L_QxmCaqzYSdnzHfKSHCIeM9G5NHKsdNy8BwnMLwhYHI4h_G6gNXA3c_3Zc8ggsXtPeG-fhk_IALFoH0b1HPrdxsBIszYLsUye_lvyffBsdxn_hfF9Ktng7BAgWjT56mDYBqpZXX25BC-odQ2mn8O" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh3.googleusercontent.com/public/tN2kf46FC7y_IEd2vzJz9v4PhVsMFjV4scZovvLYRVTMk8OdYRBBlM1l263Nuak7rQVQHT107NfwWsZQ-9_MFoiOXKozErla4banQF51QyT5igHT-QKo6cRmUiTvVbQVkjgRYIh8sPutpY-XTrG8nEludMnt6GTuOg" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh6.googleusercontent.com/public/AF-Zvxnq21ZQFZNwC4_XQnwN9-sudTFlohx7d7llv11R_60jpmPNhW679uLMzcShWd73vNAHhuTYZHFJF3rsCh7EVczcRnm-cd6KcrLDJEWWceyBUePnOPDerPf_5sovWzACyipV4JMf4k9-HomEbOwYIrwa0SwoBDXc1mwhSxVWreCs8DLNpeMRx-o" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh3.googleusercontent.com/public/IYgOn9vXVD4zHB1d67KpX9--z0NDR0URCxEPTA32KFWTSDn9l2f7XR3tt0TTRAekThgUOCH0f0dGJn5ZLh3dUAXh1IDDrlbFJNmxGeVZt_eTTIG4YB23pXSfDH1Cx5OhNoEiaCCz4QAr-e8c" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh3.googleusercontent.com/public/QDiY5hfLbDwEbvJmAgrcX4vRURGFEMBO6V66-EW_4YJGW5xJNCSLwwCltUB0YT1f0QMkUeztQZaI07KcsnxqEaaByAIq-ihvwPxg4B6wJuhEDjBIh1Bu5Txz0NBijb9y1dRdnSbtPImzk2HoSAcHUqfphDJwE1gfmErGtT0Apw" alt=""/>
</div>
<div class="span3">
<img class="img-polaroid" src="http://lh6.googleusercontent.com/public/jIGAV-2KIt3YoKQ7zDtJN44qj6puwAk5J_GVCJCRnTTOB_idlMB-cyI9d0KTy-FL965GcOJbBeH1C8ros9FMhGxQW6ZToyr-qOYYx18FomndcKpC8TxsJAMpaz9IsT48WGfe_OgsKf9heJoEGhHGTw" alt=""/>
</div>
</div>
<div id="term-history" class="span3">
<h2>Search history:</h2>
<ul>
<li>
camera
</li>
</ul>
</div>
</div>
</div>
Change the container-fluid and row-fluid classes to container and row. Then include the bootstrap-responsive.css file. Work from there. Fluid and responsive is not the same thing, although they're related and often used together. Fluid layouts adjust their widths when resized, which seems to be not what you want. Responsive layouts generally adjust their layout when resized.
http://jsfiddle.net/tylergreen/9v296/
You will still probably want to mess with the layout a bit, but the functionality is there.

Resources