font-awesome icon not displaying inside the textarea - html

I am using bootstrap form, in which I have to display the font-awesome icon in the corner(end) of the textarea field. But, I couldn't display it inside that field. Instead, I am getting the <i class="fas fa-plus"></i> as the text inside that field.
Code:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/regular.css" integrity="sha384-zkhEzh7td0PG30vxQk1D9liRKeizzot4eqkJ8gB3/I+mZ1rjgQk+BSt2F6rT2c+I" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
<body>
<div class="form-row">
<div class="col-sm-10">
<div class="form-group">
<label for="textarea0">Question</label>
<textarea class="form-control" id="textarea0" rows="2">
<i class="fas fa-plus"></i>
</textarea>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>


Try this:
.text-box {
min-width: 480px;
}
.text-container {
white-space: nowrap;
position: relative;
}
.text-container .text-icon {
position: absolute;
top: 0;
left: 0;
}
.text-container textarea {
position: absolute;
top: 0;
z-index: 1;
color: black;
background: none;
padding-left: 15px;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/regular.css" integrity="sha384-zkhEzh7td0PG30vxQk1D9liRKeizzot4eqkJ8gB3/I+mZ1rjgQk+BSt2F6rT2c+I" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
<body>
<div class="form-row">
<div class="col-sm-10">
<div class="form-group">
<label for="textarea0">Question</label>
<div class="text-box">
<div class="text-container">
<span class="text-icon">
<i class="fas fa-plus"></i>
</span>
<textarea class="form-control" id="textarea0" rows="2">This is the text</textarea>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

Related

How to put division elements side by side? [duplicate]

This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I want to have the text "burger king" written just to the right of the logo, can someone tell how to do that? I tried to do it by using bootstrap class pull-left but no change appeared.
This is what my page looks like:
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
width: 150px;
height: 150px;
margin: 10px 15px 10px 40px;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="restaurant.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-light ">
<div class="container-fluid">
<div class="navbar-header">
<a class="pull-left" href="restaurant.html">
<img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
</a>
</div>
<div class="navbar-brand">
<a href="restaurant.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</nav>>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

I would probably leverage Bootstrap's built-in flexbox classes:
<div class="container-fluid d-flex justify-content-start">
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
width: 150px;
height: 150px;
margin: 10px 15px 10px 40px;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="restaurant.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-light ">
<div class="container-fluid d-flex justify-content-start">
<div class="navbar-header">
<a href="restaurant.html">
<img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
</a>
</div>
<div class="navbar-brand">
<a href="restaurant.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap‘s grid system (https://getbootstrap.com/docs/4.0/layout/grid/) might help in this case; you can place div elements side-by-side using this code snippet:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
To correctly align the elements, you can use Bootstrap‘s align-items-center class.
Source: https://getbootstrap.com/docs/4.0/layout/grid/ and TutorialRepublic

<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="restaurant.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-light ">
<div class="container-fluid">
<div class="navbar-header">
<a href="restaurant.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" height="75" width="75"> Burger King:
</a>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

How to create 3 div with portrait images in a row responsive with bootstrap

This maybe easy but it feels more tricky for me to display 3 images in a row with responsive layout by using bootstrap
I want to create a page in my website with something like this -
Here's what I want to achieve in my website's gallery page
https://www.avivabaig.com/portraits

You can easily create your example site structure using bootstrap, visit this site for more info: https://www.w3schools.com/bootstrap/
.image-box img {
width: 100%;
height: auto;
object-fit: cover;
}
.image-box {
max-height: 235px;
overflow: hidden;
height: 100%;
margin: 50px 0;
}
<html><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body><div class="container">
<div class="row">
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
<div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=967&q=80" alt="">
</div>
</div><div class="col-md-4">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="">
</div>
</div>
</div>
</div></body></html>

My sketch of it, using the scripts and stylesheets for Bootstrap 4.0.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<style>
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_078200849e0545229d2016399b977003~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_fb68b3206eea49008cf9b17fd8382041~mv2.jpg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/IMG-4811.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_01c000ce3450418ea4fcc20e3ed38a45~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
</div>
</div>
</body>
</html>
Above the complete file to copy/paste, below the snippet to run and test:
.col-sm-4 img{width:100%;border:2px solid #fff;outline:2px solid #000}
.col-sm-4 img{margin-top:20px;margin-bottom:20px}/* just to make the snippet clearer */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_078200849e0545229d2016399b977003~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_fb68b3206eea49008cf9b17fd8382041~mv2.jpg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/IMG-4811.webp"></div>
<div class="col-sm-4"><img src="https://static.wixstatic.com/media/a32108_01c000ce3450418ea4fcc20e3ed38a45~mv2.jpeg/v1/fill/w_433,h_613,al_c,q_80,usm_0.66_1.00_0.01/WhatsApp%20Image%202021-01-14%20at%2012_00_53%20PM.webp"></div>
</div>
</div>
</body>
Check the options for the syntax, since you may even prefer to use a col-xs-4 class rather than col-sm-4 or other.

How to center in bootstrap 4 the content in a row?

I want to put the content I have(for example image) in center of the row and column.
I tried using justify-content-center, or align-item and text-align: center, but none worked.
I need the image to be in center of the row. Like, if I have 4 columns, i need tohem to be centered on all 4 columns.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
</div>
</div>
</body>
</html>

You can use the following CSS on the images:
display: block;
margin: 0 auto
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4 has new class which you can add with row class to center the content.
<div class="row justify-content-center">
!-- your content here --!
</div>
Hopefully will help you. This is also answered in similar question
Center Contents of Bootstrap row container

Just Add text-center class to each column you want its content to be aligned center.
<div class="col-xl-4 text-center">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
Here is the link to your code with this class added to every column.
Link

Bootstrap : Unable to center contents of entire row [duplicate]

This question already has answers here:
Center the content inside a column in Bootstrap
(7 answers)
Closed 3 years ago.
I'm learning HTML5, CSS3 and Bootstrap4 and have created a dummy project.
I'm attempting to create a row that will house my icon and text (company name) side-by-side and have use display:inline to achieve the same. This is followed by a tag line.
However I'm unable to get the content of the entire row in the center. I have tried text-center or text-xs-center but to no avail. I even created a custom css class
.text-center-custom{
text-align: center !important;
}
but that also didn't work.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Project1</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=B612:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row" id="topSection">
<div class="col-xs-12 text-center">
<img src="icons/icon.png" class="inline">
<h1 class="inline">Test Project</h1>
<br><br>
<h3>This is my first test project</h3>
<h3>BOOTSTRAP</h3>
Sign-Up
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
main.css
#topSection{
background: url(images/background.jpg);
background-position: center;
background-size: 100%;
color: bisque;
}
.inline{
display: inline;
font-family: 'B612', sans-serif;
}
.text-center-custom{
text-align: center !important;
}

#topSection{
background: url(images/background.jpg);
background-position: center;
background-size: 100%;
color: bisque;
}
.inline{
display: inline;
font-family: 'B612', sans-serif;
}
.text-center-custom{
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Project1</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=B612:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row justify-content-center" id="topSection">
<div class="col-12 text-center">
<img src="icons/icon.png" class="inline">
<h1 class="inline">Test Project</h1>
<br><br>
<h3>This is my first test project</h3>
<h3>BOOTSTRAP</h3>
Sign-Up
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Use justify-content-center on row
For reference you can go through Bootstrap 4 flex utilities
Hope it'd help

you can do that using bootstrap 4 flex utilities by using d-flex justify-content-center to row. Make sure that bootstrap 4 doesn't have class col-xs-12, it's replaced by col-12
#topSection{
background: url(images/background.jpg);
background-position: center;
background-size: 100%;
color: bisque;
}
.inline{
display: inline;
font-family: 'B612', sans-serif;
}
.text-center-custom{
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Project1</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=B612:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row d-flex justify-content-center" id="topSection">
<div class="col-12 text-center">
<img src="icons/icon.png" class="inline">
<h1 class="inline">Test Project</h1>
<br><br>
<h3>This is my first test project</h3>
<h3>BOOTSTRAP</h3>
Sign-Up
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

please replace this 2line to your code
<div class="row text-center" id="topSection">
<div class="col-12 text-center w-100">
#topSection {
background: url(images/background.jpg);
background-position: center;
background-size: 100%;
color: bisque;
}
.inline {
display: inline;
font-family: 'B612', sans-serif;
}
.text-center-custom {
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Project1</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=B612:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row text-center" id="topSection">
<div class="col-12 text-center w-100">
<img src="icons/icon.png" class="inline">
<h1 class="inline">Test Project</h1>
<br><br>
<h3>This is my first test project</h3>
<h3>BOOTSTRAP</h3>
Sign-Up
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Use this code
Just change <div class="col-xs-12 text-center"> to <div class="col-md-12 text-center">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Project1</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=B612:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row" id="topSection">
<div class="col-md-12 text-center">
<img src="icons/icon.png" class="inline">
<h1 class="inline">Test Project</h1>
<br><br>
<h3>This is my first test project</h3>
<h3>BOOTSTRAP</h3>
Sign-Up
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

Fill Parent Element

I'm trying to make a select button with an input on the right.
I'm trying to use bootstrap but I can't seem to make the select fill the input-group-addon.
Any ideas?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<td class="form-group">
<div class="col-xs-12 input-group">
<div class="input-group-addon">
<select>
<option>+351</option>
</select>
</div>
<input class="form-control">
</div>
</td>

There is no direct support from Bootstrap for this case, but there's a workaround for this problem. Just insert an empty .input-group-addon element between your form elements, e.g.:
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
Here is a working example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="input-group">
<select class="form-control input-group-addon">
<option>+351</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<input class="form-control">
</div>