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};
const container=document.querySelector(’.container’);
// const form=document.querySelector(’#book-form’);

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