I would like to make an adaptive design for a small website with Bootstrap, but I'm a newbie and can't find any solution for my problem here. I want to be able to display the header for a wide set of different devices, it means for cell phones with small display too. So I have written something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
</body>
</html>
It works with every web-browser pretty good, but it doesn't work properly for small resolutions.
This is the normal view of this page:
But after reaching some width (it should be 576px as I see), it breaks my layout into three lines for every div:
It doesn't depend on text or image size, there a lot of place there, so it should be a behavior of the Bootstrap.
How could I avoid it and do a really adaptive design? My page is very simple and it should be a solution to display it properly, I can't understand why Bootstrap doesn't allow it.
Add col for smaller screens. You can remove col-sm and leave only col-
This happen to your code because you didnt set anything for smaller screen than sm and bootstrap by default set any column to col-12. So your three rows on small screens had col-12 inside them. The title went to center cause of text-center class and last image went left cause of text-right.
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 col-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 col-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 col-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
Live example
If you want different approach on small screens change the col-* classes.
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
Related
I am currently new in bootstrap5 and i am having whitespace problems on my left side when its on full screen its all fine but when I am testing responsiveness the whitespace on the image never leaves.
I have tried the overflow and setting height and width but it still doesn't occupy it. help is highly appreciated as i am new with Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="supertest.css">
</head>
<body>
<div class="container-fluid g-0 m-0 p-0 ">
<div class="row g-0">
<div class="col-8 g-0 m-0 p-0">
<img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100">
</div>
<div class="col-4 overflow-hidden d-flex flex-column">
<div class="text-center pt-5 mb-2">
<img src="PUPLogo.png" alt="" class="w-25">
</div>
<h1 class="text-center">Reg<span>iTech</span></h1>
<h2 class="px-5">Login</h2>
<form>
<div class="form-group px-5 mb-3">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group px-5">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="d-flex justify-content-center mt-3">
<button type="submit" class="btn w-50 ">Submit</button>
</div>
</form>
<div class="mt-3 text-center">
don't have an account yet ?
</div>
<div class="row text-center mt-auto">
<div class="copyright">
Copyright#2022 | RegiTech | Developed DICT 3-1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
One solutions could be to remove the image as an elements and add it as a background image via CSS to style the container itself. Then, using some aspect ratio magic with object-fit: cover; You should be able to set a responsive background image which scales.
Example Here: https://jsfiddle.net/fatchild/r70gLwu3/53/
The idea is that you want the container to never show white space so you set the background image of that container to the image and make sure the image is 100 viewport width and height. This might cause the image to distort if it was forced to be the height and width of the container. To remedy this, the object-fit declaration will make sure the most appropriate part of the image is shown without distorting the aspect ratio or causing white space.
Remove the img element
Add new id to the container element id="bg-img"
Set some new declarations for that id attribute
#bg-img {
object-fit: cover;
background-image: url("http://uniacco.com/blog/wp-content/uploads/2019/12/shutterstock_1062917057.jpg");
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
Remember that local resources will not render on other peoples machines. So when posting an example make sure to link a random image from the internet, as you it will render on other people's local machines when they try to run your code.
I'm having a terribly difficult time trying to get Bootstrap/Flexbox to play nice with a height restriction.
In my layout, I have a <main> element with a fixed height. In the actual app it's calculated so that the footer appears at the bottom of the screen, for demonstration it's fixed at 500px.
I want to put some arbitrary-length user data (between 1 and potentially up to 1000 lines according to API response) in a card. I would like the card to be constrained by the calculated height of its container, with a scrollbar in the card to navigate its contents. However, the card-body seems absolutely totally intent on just growing to contain all contents - I can't get any part of the hierarchy to be limited by the 500px height set on the <main> element.
Here's a simplified example. The dark bar is the footer, which is correctly positioned below the 500px <main> element. The card stretches waaaaay past it - I want the card to be contained between the top of the page and the footer, and have a scrollbar to navigate its contents.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Manage List</title>
</head>
<body>
<main style="height: 500px">
<div class="container-fluid">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row">
<div class="col-7">
<div class="card">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
</body>
</html>
Related questions I have looked at:
When flexbox items wrap in column mode, container does not grow its width
Prevent flex item from exceeding parent height and make scroll bar work
Why don't flex items shrink past content size?
white-space css property is creating issues with flex
Fitting child into parent
Flex item is not shrinking smaller than its content
I have tried min-height: 0 everywhere, flex-shrink: 1, flex-grow: 0, and other suggestions from the above questions. Really at a loss for what to do next short of pinning the height of every single element down the hierarchy with height: 100% to make sure it doesn't grow past <main>...
You need to make the container h-100 d-flex flex-column, and then h-100 on column and card. Use overflow-hidden on the row so its height is contained by the container.
<main style="height: 500px">
<div class="container-fluid h-100 d-flex flex-column">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row overflow-hidden">
<div class="col-7 h-100">
<div class="card h-100">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto"> dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
Demo
You have to work your way down the stack, applying d-flex, h-100, and flex-column as you go to get things to fit within their parent container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<main style="height: 500px">
<div class="container-fluid h-100 d-flex flex-column">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row d-flex overflow-hidden">
<div class="col-7 h-100">
<div class="card d-flex flex-column h-100">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
The key is to set height or max-height on .card-body.
Below, I calculate the height of <main> and the .card-body based on the viewport.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Manage List</title>
<style>
main {
padding-bottom: 1em;
/* viewport height minus footer height */
height: calc(100vh - 48px);
}
main .card .card-body {
/* viewport height minus footer height minus height of preceeding elements minus main padding-bottom */
height: calc(100vh - 48px - 7em - 1em);
}
</style>
</head>
<body>
<main style="">
<div class="container-fluid">
<div class="row">
<h1>Dashboard</h1>
</div>
<div class="row">
<div class="col-7">
<div class="card">
<div class="card-header">Your Items</div>
<div class="card-body overflow-auto">
dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>dsfg<br>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-dark"></footer>
</body>
</html>
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I have an img nested in a col. However, the col is larger than the image. It's as if there is padding at the bottom, but I don't see any. Here is a screenshot: https://imgur.com/a/K8iRWLf
There is another img nested within a separate col in the same row, but that img is the exact same size.
EDIT* I tried two fixes per a suggestion: display: block and vertical-align: bottom (separately), neither of which worked.
.img-shrink {
max-width: 80%;
max-height: 80%;
}
<div class="row justify-content-center">
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-beer.jpg" alt="beer">
</div>
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-treats.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
After playing around, I figured it out. The col is sized to the actual size of my image, not the max-width/height: 80% image that the browser renders. If anyone knows a way around this without resizing the original image, please enlighten me.
Try this once and see if it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="row justify-content-center">
<div class="col-3">
<img class="img-fluid" src="img.jpg" alt="beer">
</div>
<div class="col-3">
<img class="img-fluid" src="image.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
</body>
</html>
I am trying to fix a code. I want a responsive image with Bootstrap, but it doesn't work. How can I solve the problem?
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
Ivan
Michal Graczyk is correct... img-responsive has been replaced by img-fluid in Bootstrap 4.
You can find more information about the changes from v.3 to v.4 at https://getbootstrap.com/docs/4.0/migration/
You can find more information specifically about images in v.4 at https://getbootstrap.com/docs/4.0/content/images/
I guess there is some problem with your bootstrap CDN when I tried executing your code with proper bootstrap CDN with some random height and width of the image. It was responsive.
This is with respect to bootstrap 3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
</body>
</html>
If you are using Bootstrap 4
Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
Since You're using Bootstrap 4 there is no img-responsive class. You should use img-fluid.