I am trying to get my input to extend across my whole form , but I been unablee to no matter what I do

I want my input to look like the one in the pic below:

But this is the puny input form that results no matter what I do:

Here is the link to my code:

Actually fixed my problem. Turned out, I needed to add these libraries to give the input form the appearance that I desired it to have.

<link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">


Update: I want to add a pink warning message when the user click the submit button but the input user field is empty. A pink warning message box that looks like this:

;

and this is the function I used to try to display this warning message but it doesn’t work:

function showAlert(message,className){
const div=document.createElement(‘div’);
div.className=alert alert-${className};
div.appendChild(document.createTextNode(message));
const container=document.querySelector(’.container’);
// const form=document.querySelector(’#book-form’);
container.insertBefore(div,inputBtn);
setTimeout(function(){
document.querySelector(’.alert’).remove();
},3000)

Here is the link to my code:https://codepen.io/noblegas/pen/abOVxNw