Image fluid not working on Bootstrap 4
Question
I am having trouble with making images responsive with Bootstrap 4? When the code below renders to the browser there are three images in the navbar (top left). I am having issues with these three images scaling down in size when viewed on mobile!
I would like the two colunms in the navbar to sit side by side with the images scaling down and the text aligned to the right. At this moment the two columns do not sit side by side as the second column is forced below as the images are not responsive?
I have a larger carousel included and this seems to work fine! I am not sure why this is working and the other images are not? I am probably doing something really stupid here but I would appreciate someone highlighting where I am going wrong to save me from pulling out my hair. Thanks in advance
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.contact {
text-align: right;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar px-0">
<div class="row col-lg-12 px-0">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-right-padding">
<img class="img-fluid" src="http://via.placeholder.com/160x40" alt=""><img class="img-fluid" src="http://via.placeholder.com/160x40" alt="">
<br>
<a class="navbar-brand" href="index.html">
<img class="img-fluid" src="http://via.placeholder.com/160x160" style="margin-top: 10px;" alt="">
</a>
</div>
<div class="contact col-lg-6 col-md-6 col-sm-6 col-xs-6 px-0">
<p><a href="contact.html">Some heading</a></p>
<div style="padding-top: 30px;">
<p>Some random text
</div>
</div>
</div>
</nav>
<div class="col-lg-12 px-0 carousel slide carousel-fade animated fadeIn" id="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="Second slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="Third slide">
</div>
</div>
</div>
</div>
<!-- bootstrap 4 js & jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
2 answers
solution1
3 ACCPTED 2018-04-16 15:39:42
The issue is with the usage of bootstrap classes.
There is no col-xs-6 now in bootstrap 4. Its col-6
Here is the working plunker: Side by side columns
I have also removed the col-lg-12 from <div class="row col-lg-12 px-0">
solution2
0 2018-04-16 15:36:34
Your first HTML IMG tab is listed twice next to eachother. Make sure its not in your text editor.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.