I am trying to give border to div with bootstrap 4 border. With only border property it is appearing weird while with other properties no border is showing up. Please find the code snippet below.
I have tried with the beta 2 version also.
Let me know if I am missing something.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</div>
</body>
</html>
For bootstrap border to work, you have to add the border class. So for example, when you write <span class="border-right-0"> It is stating that no border should be to the right. You haven't stated a border to begin with though so no border is going to show. What you need to do is <span class="border border-right-0">.
It's the Subtractive border so first, you will need a border so you need to include the border class first.
<span class="border border-top-0"></span>
To see it in more effect try this:
<span class="border border-top-0 p-2 border-primary">Border</span>
Using contextual classes and padding utilities you can easily get the difference.
Hey you just need to add some classes for showing the border i.e. border border-primary, border border-secondary etc.
And class "border border-0" means no border.
In class="border border-light", "border-light" is another contextual border color.
Below are useful classes:
A list of contextual border color you can use the below classes:
border-primary
border-secondary
border-white
border-dark
border-light
border-info
border-warning
border-danger
border-success
If you want to get easier then try https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp or https://v4-alpha.getbootstrap.com/utilities/borders/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<!-- Just created a contianer to test the border class -->
<div class="container">
<div class="text-center">
<h1> Testing bootstrap 4</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<!-- Testing span with class border -->
<span class="border">
<div class="text-primary">Testing Bootsrap 4 Border </div>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border-0 border border-primary">Testing Bootsrap 4 Border 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-primary border-top-0">Testing Bootsrap 4 Border top 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<span class="border border-danger border-right-0">Testing Bootsrap 4 Border right 0</span>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<span class="border border-light">testing border light</span>
</div>
<div class="col-sm-12"> col 2</div>
</div>
</div>
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Related
In order to replicate my problem, I wrote a simple HTML with 2 bootstrap columns, I would like my second column to have multiple <p> items , each one of them below the other, however the issue arises when the strings contained in the <p> tag are of different lengths, since I want them to be in the center of the column but to also start in the same position relative to the X-axis.
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6">
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
Essentially I would like the string "A much longer text" to be exactly below "Small text", so that it would look this way:
Small text
A much longer text
Instead of
Small text
A much longer text
I tried styling the column with text-align:center as well as using flexbox and align-items:center but they both produce the same result.
first you need to add a d-flex justify-content-center classes to your column then add a div parent to your p tag so your code will be like that
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6 d-flex justify-content-center">
<div>
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
</div>
Using the bootstrap 4 flex box should solve the issue. On running the code below, you would find that bootstrap responsiveness is placing the col-md-6 in 2 lines. Running code outside stack overflow should give the result you desire.
Edit: Added some javascript code to center the text as per the comments from the OP
$( document ).ready(function() {
let divLeft = $('#div-center-text').position().left;
let min = 0;
$('.center-text').each(function(i, obj) {
let p = $(obj);
let pLeft = p.position().left;
if (min==0 || min>pLeft)
min = pLeft;
});
$('.center-text').each(function(i, obj) {
$(obj).offset({left: divLeft + min});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></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>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 border">
Some unrelated text
</div>
<!-- .col-md-6 -->
<div class="col-md-6 border" id="div-center-text">
<div class="d-flex flex-column align-items-center w-100">
<p class="mb-0 center-text">Small text</p>
<p class="mb-0 center-text">A much longer text</p>
</div>
<!-- .flex-column -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</body>
</html>
Using bootstrap reslove your issue, you can align content in center ofthe page horizontal.
try below example.
<div class="pricing4 bg-light" style="margin-top: -20px;padding-bottom: 25px;margin-bottom: -32px;">
<div class="container">
<!-- Row -->
<h2 style="text-align: center;padding: 40px;">This is improper content (div)</h2>
<div class="row justify-content-md-center">
<!-- Row -->
<div class="row justify-content-md-center" style="margin-left: 30px;margin-right: 30px;">
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" alt="wrappixel kit">
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a 'right-float' classed div placed inside a 'w-100' classed div. Inside the right-floated div I want to display at the top a button with 3 points inside (...) and at the bottom another Icon (see images below). So I added 'h-100' class to the float-right div and created two divs inside it: the first one with the ... button inside and the second one with 'align-bottom' class.
Problemthe second div does not stay at the bottom, I think because h-100 is not working as expected
Observed behaviour
Expected behaviour
HTML Tree
Example snippet
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="clearfix w-100 border border-primary">
<div class="float-right h-100">
<div class="clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">...</button>
</div>
</div>
<div class="align-bottom clearfix">
<div class="float-right">
<button class="btn btn-sm btn-primary">BTN2</button>
</div>
</div>
</div>
<div>
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
</div>
</body>
</html>
h-100 is working as expected, because the height is 100% of the childs inside. It is not usable to stretch a div to its parent height.
You could use flex, to make it work right
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-stretch border border-primary">
<div class="flex-grow-1">
<div>FOO</div>
<div>FOO2</div>
<div>FOO3</div>
</div>
<div class="d-flex flex-column bg-danger">
<div class="flex-grow-1">
<button class="btn btn-sm">...</button>
</div>
<div>
<button class="btn btn-sm">BTN2</button>
</div>
</div>
</div>
</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 am trying to build a layout 2 divs in the left , and one indivudal to the right , but however I am getting 3 divs in vertical . I am currently using bootstrap 3.3.7 , how can I achieve this?
layout
<!-- 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>
<div class="container">
<div class="row d-md-block">
<div class="col-9 border float-left" style="background-color: red">
1 of 3
</div>
<div class="col-3 border taller float-right" style="background-color: blue">
2 of 3
</div>
<div class="col-12 col-md-9 border" style="background-color: green">
3 of 3
</div>
</div>
</div>
First, make two columns of col-6 class. This would split the screen into two columns. Next, in the first column, add a row, and in that row, add two col-12 columns. This would make the columns look like what you want.
Use this code:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
1 of 3
</div>
<div class="col-12">
3 of 3
</div>
</div>
</div>
<div class="col-6">
<div class="col-12" style="margin-left: -1rem">
2 of 3
</div>
</div>
</div>
I have tried to use a bootstrap search box in my code that is supposed to be rendered like this:
But for some reason it does not render correctly in my layout which is something like this:
Here is my html code for this basic layout. Is there anything I can do so the button renders corrctly on the search box?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
You can check the below code. or below youtube link for the better explanation:
https://youtu.be/34Ee-HLtMgU
Only fontawesome library was missing.
I have added one more search box. try to add submit button instead of adding span tag. This is the best practice.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
I don't know if you missed this point, but you didn't include the "fontAwesome" CDN link. You need to use it to display the search icon. I also interpreted some of your code to create the image. You can check it.
And if you want search input to cover the entire line, you should use col-lg-12 instead of col-lg-3. The Bootstrap grid system uses a 12 column system. You must know that. https://getbootstrap.com/docs/4.4/layout/grid/
I used bootstrap's own classes to set border and icon background color. warning color for your situation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
<div class="container">
<!-- <div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div> -->
<div class="row" id="secondRow">
<div class="col col-lg-12">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control border border-warning my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3 bg-warning" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<!-- <div class="col">
2 of 3
</div> -->
</div>
</div>
First try changing fa fa-search in order to the icon display.
in this line => idk if u can use amber try using bg-warning (this is bootstrap), but if you want the exact color i would use css.
and maybe it is grey because the icon is not there.