How to do responsive product images in bootstrap? I need all the columns and images scale down when i'm sizing the browser like here: link
<div id="product-list">
<div class="container">
<div class="row">
<div class="col-lg-15 col-md-3 col-sm-4 col-xs-12 item">
<div class="product">
<div class="product-image">
<img src="http://placehold.it/220x322" width="220" height="322" class="img-responsive" alt="Simple product">
</div>
<div class="product-info">
<div class="product-name">Rick Owens</div>
<div class="product-model">Glass ice nappa leather bomber</div>
<div class="product-price">€ 1161.00</div>
</div>
</div>
</div>
<!-- more products -->
</div>
</div>
</div>
Here's the html fiddle
Give your images the 'img-responsive' class and wrap it in the default bootstrap tree (container - row - col)
Adding Bootstrap's built in .img-responsive class to any image tag will do the job.
The .img-responsive class applies the following CSS properties to the image:
max-width: 100%;
height: auto;
display: block;
Related
I have a bootstrap 4 layout with 3 columns, the middle column has two nested columns. One is an embeded youtube video with responsive size and the other is a list of text with a scroll bar. I want to set the height of the scrollable column (the red background) to exactly the height of the embeded responsive video and make it resizable and responsive, in case the device width is insuficient it should be collapsed bellow the video. The code is here https://jsfiddle.net/h7f8r1ut/
Please suggest if this can be achieved without javascript code.
I've looked at similar questions but was unable to find a suitable solution for my exact requirements.
.scroll {
text-align: left;
height: 40vh;
overflow: hidden;
overflow-y: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 bg-dark text-info">
left sidebar
</div>
<div class="col-md-8 bg-secondary">
<div class="container-fluid">
<div class="row">
<div class="col-md-10" id="video">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-2 scroll bg-danger">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 bg-dark text-info">
right sidebar
</div>
</div>
</div>
</div>
You need to put the scrollable content inside a position:absolute parent, and then set overflow:auto on the column. There are utility classes for this included in Bootstrap 4.3 and newer.
<div class="container-fluid">
<div class="row">
<div class="col-md-10" id="video">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
</div>
</div>
<div class="col-md-2 overflow-auto bg-danger">
<div class="position-absolute">
<p>1</p>
<p>2</p>
....
</div>
</div>
</div>
</div>
https://www.codeply.com/go/W0onIeqkRy
EDIT:
If you only want the scroll behavior on larger screen widths (md and up), you could use a media query:
#media (min-width: 768px) {
.position-md-absolute {
position: absolute;
}
}
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.
I am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.
The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.
https://jsfiddle.net/gokcLvtv/7/
<div class="container">
<div class="row header">
<div class="col-xs-6">
Title
</div>
<div class="col-xs-6 text-right">
LOGO
</div>
</div><!-- Header-->
<div class="row main">
<div class="col-xs-8">
<div class="well">Panel One</div>
</div>
<div class="col-xs-4">
<div class="well">Panel Two</div>
<div class="well">Panel Three</div>
</div>
</div><!--main-->
<div class="row footer">
<div class="col-xs-12">© Copyright 2016</div>
</div><!--footer-->
</div><!--container-->
As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.
You can use the vw value for horizontal and vertical resizing.
For example
HTML
<div class="main">
<div class="well">
Panel one
</div>
</div>
CSS
.main {
border: 1px solid red;
height: 75vw;
}
.well {
width: 30vw;
height: 30vw;
margin: 1vw;
}
It's easy to translate from px to vw. Every 1 vw is 10 pixels.
Thanks for your help with the vw ... I have managed to achieve this using vh for the height..
I have created an example for anyone who would like to use this in the future - here
Using the same layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">Header</div>
</div>
</div>
<!-- main -->
<div class="row">
<div class="col-xs-8 main">
<div class="well">
Main Panel
</div>
</div>
<div class="col-xs-4 side-bar">
<div class="well">
Side Panel One
</div>
<div class="well">
Side Panel One
</div>
</div>
</div>
<!-- Footer-->
<div class="row">
<div class="col-sm-12">
<div class="well">Hello</div>
</div>
</div>
</div>
You will just have to play around with the heights to get it to the screensize that works for you.
I have a complex nested row & column layout using Zurb Foundation. I want to make the divs with text '.grid-text' the same height as the row. I've tried various strategies to do this, but it ends up breaking the flexbox vertical text centering. I've also searched through StackOverflow questions and none address this issue.
I ended up using Foundation's Equalizer but for some reason it isn't working. Any suggestions? I'm open to different strategies.
http://codepen.io/anon/pen/bVNjyv
I tried jquery and equalizer:
$(document).ready( function() {
var rowHeight=$('.v-align').height();
$('.grid-text').height(rowHeight);
});
<div class="row v-align" data-equalizer data-equalizer-mq="large-up">
<div class="large-4 column b full-width">
<div class="grid-text" data-equalizer-watch>
<h3>A</h3>
<p>text</p>
</div>
</div>
<div class="large-8 column full-width">
<img src="http://placehold.it/2604x1302/00FFCC" data-equalizer-watch>
</div>
</div><!--/row9-->
For this kind of layout I tend to use Masonry which plays nice with Foundation.
I'm not sure what environment you're using or if you're just using codepen but you were missing a few JS files that Foundation requires which I added to the pen:
jquery.js
foundation.js
foundation.equalizer.js
Then make sure Foundation is initialised:
$(document).foundation();
I updated your HTML as follows:
<div class="row">
<div class="show-for-large-up large-3 column full-width">
<img src="http://placehold.it/1302x2604/FF3333">
</div>
<div class="large-9 column">
<div class="row" data-equalizer data-equalizer-mq="large-up">
<div class="large-4 column b full-width">
<div class="grid-text" data-equalizer-watch>
<div class="inner">
<h3>A</h3>
<p>text</p>
</div>
</div>
</div>
<div class="large-8 column full-width" data-equalizer-watch>
<img src="http://placehold.it/2604x1302/00FFCC">
</div>
</div>
</div>
<div class="large-6 columns full-width">
<img src="http://placehold.it/2604x1302">
</div>
<div class="show-for-large-up large-3 columns full-width last">
<img src="http://placehold.it/1302x2604/FFFF99">
</div>
<div class="large-9 columns">
<div class="row" data-equalizer data-equalizer-mq="large-up">
<div class="large-8 columns full-width" data-equalizer-watch>
<img src="http://placehold.it/2604x1302/FF9966">
</div>
<div class="large-4 columns b full-width">
<div class="grid-text" data-equalizer-watch>
<div class="inner">
<h3>A</h3>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
</div>
As for the css centring there are many ways you can do this, a great article to read on the subject is Centering in the unknown which I often reference. I would recommend not using flexbox as it's only supported in the latest browsers. In this instance I used the table cell method which I find works best with horizontal centering in Foundation.
I added the div .inner inside your .grid-text div. I then added the following css:
.grid-text {
display: table;
text-align: center;
width: 100%;
// no need to set the height here
// as it's set by data-equalizer
}
.grid-text .inner {
display: table-cell;
vertical-align: middle;
}
Hope that helps.
http://codepen.io/thmsmtylr/pen/EVjXye
well if you mean font size just try:
.v-align {
align-items: center;
font-size: 10px;
}
but test for the size that works properly, of course.
I am new with Bootstrap 3 and just want to know how can I use .container class from Bootstrap with my own fixed wrapper.When I have fixed container of the page for example
.wrapper {
width:960px;
}
and .container class from Bootstrap, how can I combine and use in my web page ?
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div> </div> </div> </div>
is it correct ?
Thanks!
no need for the extra div. You could just do
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div>
</div>
</div>
.wrapper {
max-width: 960px;
}
Note that I used max-width in stead of width, or the responsiveness would be lost.