While using the Twitter Bootstrap 4 code provided below, I have noticed some extra space appearing where the picture element is placed. Interestingly, when I remove the picture element from the column, the extra space disappears. However, when I replace the picture element with "lorem ipsum text," the extra space reappears.
On the other hand, the element containing the text "content" does not exhibit any additional space thanks to the no-gutters class being applied.
In the past, I have resolved similar issues by adjusting CSS to eliminate the extra space manually. However, this should not be necessary when working within a framework like Bootstrap 4 (v4.3.1).
I am open to any suggestions you may have on how to address this issue effectively.
<style>
body {
background-color: blue;
}
.container{
padding: 0px;
}
.bg-blue {
background-color: #0D1954 !important;
}
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover {
color: rgba(255, 255, 255, 1);
}
.navbar-light .navbar-nav .nav-link:hover {
text-decoration: underline;
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-light .navbar-toggler {
color: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
}
.white-background {
background-color: #FFF;
}
<style>
The HTML code snippet is as follows:
<body>
<div class="container">
<div class="row d-block d-lg-none">
<div class="col-12">
<picture>
<source srcset="https://picsum.photos/600/300" type="image/webp" class="img-fluid">
<source srcset="https://picsum.photos/600/300" type="image/jpeg" class="img-fluid">
<img src="https://picsum.photos/600/300" class="img-fluid">
</picture>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 white-background ">
content
</div>
</div>
</div>
</body>
You can view the code on Fiddle here: Bootstrap Code on Fiddle