HomeworkLib
Question

modify the following form to be responsive using the Bootstrap style and include it in the...

modify the following form to be responsive using the Bootstrap style and include it in the page: http://www.simplehtmlguide.com/livedemo.php?e=forms1

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Solution :

Code :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>

/* body style */

body {

font-family: Arial, Helvetica, sans-serif;

background-color: black;

}

* {

box-sizing: border-box;

}

/* Add padding to containers */

.container {

padding: 16px;

background-color: white;

}

/* Full-width input fields */

input[type=text] {

width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

display: inline-block;

border: none;

background: #f1f1f1;

}

input[type=text]:focus {

background-color: #ddd;

outline: none;

}

/* Overwrite default styles of hr */

hr {

border: 1px solid #f1f1f1;

margin-bottom: 25px;

}

/* Set a style for the submit comment button */

.submitbtn {

background-color: #4caf50;

color: white;

padding: 16px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

}

.submitbtn:hover {

opacity: 1;

}

</style>

</head>

<!-- body tag -->

<body>

<!-- here we can add one form tag -->

<form action="formaction.php" method="post">

<div class="container">

<!-- this title of form -->

<h1>Leave a comment:</h1>

<hr />

<!-- labels and input fields -->

<label for="name"><b>Name</b></label>

<input type="text" placeholder="Enter Name" name="name" required />

<!-- radio buttons for ratings -->

<label for="rate"><b>Rating</b></label><br /><br />

<label>1

<input type="radio" checked="checked" name="radio" />

<span class="checkmark"></span>

</label>

<label>2

<input type="radio" name="radio" />

<span class="checkmark"></span>

</label>

<label>3

<input type="radio" name="radio" />

<span class="checkmark"></span>

</label>

<hr />

<!-- text area is here -->

<label for="comment"><b>Comment</b></label><br /><br />

<textarea placeholder="add comment here" name="comment" rows="4" cols="70"></textarea>

<!-- submit button -->

<button type="submit" class="submitbtn">Submit Comment</button>

</div>

</form>

</body>

</html>

Result

0 0
Add a comment
Know the answer?
Add Answer to:
modify the following form to be responsive using the Bootstrap style and include it in the...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Using Bootstrap as a basis, and incorporating the grid system from Bootstrap along with your own...

    Using Bootstrap as a basis, and incorporating the grid system from Bootstrap along with your own custom HTML and CSS create an e-commerce store. E-commerce store should be about video game items or sports goods. The store should include AT LEAST: Homepage with at least a hero, a gallery of products About page Catalog page Cart page Check out page Notes The site MUST be responsive and look good on tablet/mobile/desktop The cart page should have static products in the...

  • Using Bootstrap, create the following: 1. A webpage that requests a patient in a doctors office...

    Using Bootstrap, create the following: 1. A webpage that requests a patient in a doctors office to enter typical information that a new patient must provide. Personal information (such as name, address, and ?), other doctor information (such as a specialist), medical information (such as history of illnesses and surgeries) and medicines (such as over-the-counter and perscriptions). 2. The Form must include textboxes, dropdown lists, radio buttons and check boxes to accept the information. 3. Submit the form (in the...

  • Using Bootstrap, create the following: 1. A webpage that requests a patient in a doctors office...

    Using Bootstrap, create the following: 1. A webpage that requests a patient in a doctors office to enter typical information that a new patient must provide. Personal information (such as name, address, and ?), other doctor information (such as a specialist), medical information (such as history of illnesses and surgeries) and medicines (such as over-the-counter and perscriptions). 2. The Form must include textboxes, dropdown lists, radio buttons and check boxes to accept the information. 3. Submit the form (in the...

  • make a checkout page for an online e-commerce clothing store using html, CSS and bootstrap.

    make a checkout page for an online e-commerce clothing store using html, CSS and bootstrap.

  • Paul carried out 1000 bootstrap replications using computer and obtained the following bootstrap distribution of sample...

    Paul carried out 1000 bootstrap replications using computer and obtained the following bootstrap distribution of sample means. The bootstrap standard error is given by 1.843. 50 40 30 20 10 15 16 13 10 10.974 Using the 95% rule, what is the 95% confidence interval for the population mean μ of the daily number of crime incidents in Sydney (rounded to one dp.)? Α) (5.9, 15.5) B) (6.3, l 5.0) C) (73,14.7) D) (7.6,142) 14. E) (8.0.14.0) Using the percentile...

  • Build a bootstrap 4 website with the following below: 1. A table with at least four...

    Build a bootstrap 4 website with the following below: 1. A table with at least four columns and four rows (How does the table display in mobile view in Chrome?) 2. A bootstrap modal popup 3. An image in the jumbotron using one of the bootstrap image classes. 4. Optional: Include some jQuery to add a new row to the table

  • Modify the following file, so that: If the user input for the age input box is...

    Modify the following file, so that: If the user input for the age input box is empty, please send the user a warning message: “Age field cannot be empty” and return to the form web page to allow the user to re-input the age; If the user input for the age input box is incorrect (e. g. less than 1), please also send the user a warning message: “Your age input is not correct!” and return to the form web...

  • Which of the following things cannot be accomplished directly using only JavaScript? Modify the contents of...

    Which of the following things cannot be accomplished directly using only JavaScript? Modify the contents of a web page based on changes to data stored on the server. Modify the contents of a web page when the page is loaded. Modify the contents of a web page periodically based on a timer. Modify the contents of a web page when a user action (e.g., button click) occurs.

  • APA style questions Q5. In APA style the list of references should be in order by:...

    APA style questions Q5. In APA style the list of references should be in order by: O Chronological by date of publication O Alphabetical by first author's last name O Alphabetical by title O No particular order Q6. Select the correct format for the title page in APA style. O Deconstructing plagiarism O DECONSTRUCTING PLAGIARISM O Deconstructing Plagiarism Q7. Select the correct format for the running head in APA style. O Deconstructing plagiarism O Deconstructing Plagiarism O DECONSTRUCTING PLAGIARISM Wo....

  • Modify the following three molecules so that they show the form that is dominant at physiological...

    Modify the following three molecules so that they show the form that is dominant at physiological pH

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT