Adaptive layout. Is it right?

The layout is not particularly good, but want to understand.
I have below table with the picture inside the div on all monitors displayed the same way I do?
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="height: 603px;">
 <div class="info-box info-box2">
 <div class="img">
 <img src="images/uploads/test/arrow.png" style="width: 70%;">
</div>
 </div><!-- /.info-box -->
</div>


Is there any must-read guide on this topic? Useful lessons can be.
July 8th 19 at 15:26
3 answers
July 8th 19 at 15:28
Solution
July 8th 19 at 15:30
Solution
col-lg-1 col-md-1 col-sm-1 col-xs-1 this is initially wrong, the record does not make sense, the bootstrap works in such a way that if you asked for example
<div classs="col-sm-3">
</div>


all that above (ie, md, and lg) will be col-md-3 and col-lg-3
and anything below (xs) will be col-xs-12
that is, just specify col-xs-1 and all, but it does not make much sense as say on the phone with width 320px display will be divided into 12 parts and consider that it will be difficult, you can try for example
<div class="col-md-4 col-sm-3 col-xs-6">
content
</div>


if the picture is inside the block then give it a class and assign values
width:100%;
height:auto;


and it will scale under the block without losing proportions
Well, thank you, direct to get the answer I wanted! - Trever_Padberg commented on July 8th 19 at 15:33
: please ask) - Nels.Gorczany commented on July 8th 19 at 15:36
July 8th 19 at 15:32
This is not correct:
style="height: 603px;"

Define the class and ask the height in it.
For images specifies the width in atribute, not inline style.
"Pictures tell the width in atribute, not inline style." style="width: 70%;"> about it? Ie is better in style.css to reflect that, of course.
But it worries me in the first place: class="col-lg-1 col-md-1 col-sm-1 col-xs-1" . That's right I did? - Trever_Padberg commented on July 8th 19 at 15:35

Find more questions by tags BootstrapHTMLCSS