I am use Bootstrap 3 and have a problem. Some of my images in row responsive normal, but images with links on insta and vk are not responsive. The size of images are 40x40
Code below
.navbar-default-footer {
background-color: white;
text-align: center;
margin-bottom: 0;
}
div.col-lg-4.col-md-4.col-xs-4 img {
margin-left: auto;
margin-right: auto;
display: inline;
}
.footer_text {
font-size: 5px;
color: #708090;
margin-bottom: 0px;
}
<nav class="navbar navbar-default-footer" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="images/Originals/example2.jpg" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="images/insta_40x40.jpg" class="img-responsive">
<img src="images/vk_40x40.jpg" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="images/Originals/example2.jpg" class="img-responsive">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<p class="footer_text">
Свадебные прически в Виннице. Людмила Кулик. Все права защищены, любое копирование и использование материала запрещено без согласия автора.</p>
</div>
</div>
</div>
</div>
</nav>
Thanks all for help!
It's because a elements are display: inline; by default. Set the a elements to be display: inline-block; or display: block;.
Related
How can i center a jumbotron in the center of my page?
I already tried col-lg-6 with float-lg-center.
.jumbotron {
min-width: 585px;
margin: 10px auto;
display: flex;
justify-content: center;
margin: 10px 10px 10px 10px;
border: 0.08em solid black;
}
h1 {
font-size: 6em;
color: #484949;
}
#socDesc {
color: black;
}
body {
min-width: 520px;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="col-lg-8 col-md-10 col-sm-12 col-xs-12 offset-lg-2 offset-md-1 float-md-center">
<div class="jumbotron">
<div class="container">
<div class="container-fluid">
<div class="column">
<h1 class="text-center">Society</h1>
<hr />
<h4 class="text-center">"That's one small step for a man, one giant leap for mankind" - Neil Armstrong</h4>
<hr />
<div class="figure">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
<img id="" class="figure-img img-fluid rounded" src='http://4.bp.blogspot.com/-1tvR6wEiwiI/VYJSH4pfrsI/AAAAAAAABa8/RoQtTAtnD6Q/s1600/PBS.jpg' />
</div>
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
<img id="" class="figure-img img-fluid rounded" src='http://www.extremetech.com/wp-content/uploads/2013/04/lhc17.jpg' />
</div>
</div>
<!-- row-->
<figcaption class="figure-caption">This is the Large Ha</figcaption>
<hr />
</div>
<!-- figure -->
</div>
<!-- column -->
</div>
</div>
</div>
</div>
View on Codepen
Add text-center in the class
<div class="jumbotron text-center">
Try <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 offset-3 float-md-center"> That worked for me, but offset-xs-3 may be more proper due to the following:
It wasn't working in codepen for some reason but if you want the same amount of columns on all screen sizes you can use only col-xs-6 and it will apply that to all larger screen sizes.
Want to keep the image and div below at the same width.
Works fine until I get to around 545px to 575px window size. The .header changes width proportion only at col-md-12. Is there a way to keep the same aspect ratio?
SCREENSHOT
CODEPEN
HTML
<div class="container">
<div class="row">
<div class="first-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<div class="second-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<div class="third-column col-md-4 col-sm-6 col-xs-12">
<img class="img-responsive" src="https://unsplash.it/500">
<div class="header">header</div>
</div>
<!--END ROW-->
</div>
<!--END CONTAINER-->
</div>
CSS
.first-column{background-color: #c0c0c0}
.second-column{background-color: #808080}
.third-column{background-color: #778899}
.header{
background-color:rgba(45,44,89,0.7);
width: 100%;
color: #ffffff;
position: relative;
bottom: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
The bootstrap .img-responsive class has a max-width:100%; but it doesn't set the width.
So add a width to the class.
.img-responsive {
width: 100%;
}
https://codepen.io/rickydam/pen/XarXYX
I made this complicated layout in bootstrap but, the point is when I remove to image below on the right side, all other images changing smaller.
How can I have this always same size?
I tried to work with numbers for width and height but the result was bad!
The number of images will change based on the titles so I might have 3 images or 2 or 5.
Please help me!
Before removing
After removing
.container-fluid .expo {
margin-left: 20px;
margin-right: 20px;
text-align: center;
float: none;
margin-bottom: 20px;
}
.expoinfo {
display: inline-block;
padding: 0;
}
.expoinfo h3 {
font-size: 22px;
margin-top: 0px;
padding-right: 20px;
text-align: left;
}
.bigimg {
padding: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
text-align: center;
}
.bigimg img {
border-radius: 0;
width: 100%;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
height: 100%;
}
.colthumb {
overflow: hidden;
margin: 0;
padding: 0;
float: left;
}
.thumbnail {
padding: 0;
margin: 0;
border-style: none;
}
.thumbnail img {
width: 100%;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
border-radius: 0;
border-style: none;
height: 100%;
}
<div class="container-fluid expo">
<div class="row expoinfo">
<section class="col-lg-10 col-lg-offset-1">
<h3>title</h3>
<div class="bigimg col-sm-6 col-md-6 col-lg-6">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/600x600/" alt="">
</a>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
</section>
</div>
</div>
The example you made didn't include bootstrap.css even though it was using bootstrap's classes.
See updated demo: https://jsfiddle.net/2aLdmvw4/
I just found my answer!
<div class="row">
<section class="col-lg-offset-2 col-lg-8">
<h3>title</h3>
<div class=" thumbcol col-md-4 col-lg-6">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image">
</div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"> </div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
</section>
</div>
HTML CODE:
<div class="container-fluid">
<header class="header-area row">
<div class="container-fluid">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
CSS CODE:
.header-area .logo-area img {
width: 90px;
height: auto;
margin: 52px 0 120px;
}
.img-responsive {
margin: 0 auto;
}
I tried in many ways but i failed.The solution should be done using bootstrap.Please help me.
here is a solution, just add css display:inline-block and put all your tag between this html thg <center > </center>
here is modified code
.inline{
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.header-area .logo-area img {
width: 90px;
height: auto;
margin: 52px 0 120px;
}
.img-responsive {
margin: 0 auto;
}
<center>
<div class="container-fluid">
<header class="header-area row">
<div class="container-fluid inline">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid inline">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
</center>`
good luck..
try adding 1 more class text-center to conrainer-fluid and remove any margins you applied in your css
<div class="container-fluid text-center">
<header class="header-area row">
<div class="container-fluid">
<div class="logo-area row">
<div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
<img class="img-responsive" src="images/logo.png" alt="V" />
</div>
</div>
</div>
<div class="container-fluid text-center">
<div class="heading row">
<div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
<h1>I love design </h1>
</div>
</div>
</div>
</header>
</div>
Add this style in you CSS file:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
And also add apply this class on your image:
<img class="img-responsive" src="images/logo.png" class=".center-block" alt="V" />
Demo
I'm trying to make a grid layout with images inside, The images aren't always the same size, Some of them seem to make the layout of the grid slightly smaller and i can't figure out a way to get them all the same size.
Here's the HTML.
<div class="col-xs-12">
<div class="row">
<h2>Handheld Consoles</h2>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile purple text-center">
<h3 class="title">Nintendo 3DS</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/3ds.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile red text-center">
<h3 class="title">Nintendo GBA</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/gba.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile orange text-center">
<h3 class="title">Nintendo 64</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/n64.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile green text-center">
<h3 class="title">Sony PSP</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/psp.png" /></div>
</div>
</a>
</div>
</div>
</div>
And the CSS.
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
}
.title {
margin-top: 0px;
text-align:center;
}
.purple {
background: #5133AB;
}
.purple:hover {
background: #3e2784;
}
i believe if you just set the height of class .tile, it should work
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
height: 200px; // or whatever height you want all the tiles to be
}