ZuoTi.Pro
Question

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

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

Homework Answers

Answer #1

1. A table with at least four columns and four rows (How does the table display in mobile view in Chrome?)

ans: i have used table responsive class. if the table is to long it will be adjusted.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron jumbotron-fluid">
<center>
<img src="paries.jpg" class="rounded-circle" width="204" height="204">
</center>
</div>

<div class="container">
<button type="button" class="btn btn-primary" id="insert-more">Add new row</button>

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>


<br><br>
<div class="table-responsive">
<table id="mytable" class="table table-bordered">
<thead>
<tr>
<th>Coloum1</th>
<th>Coloum2</th>
<th>Coloum3</th>
<th>Coloum4</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

</tbody>
</table>
</div>
</div>
</div>


<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
  
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
  
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
  
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
  
</div>
</div>
</div>


</body>

<script type="text/javascript">

$("#insert-more").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});


</script>


</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Build a bootstrap 4 website with the following below: 1. A table with at least four...
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

  • 2. Write a script that implements the following design: In the Downloads table, the user_id and...

    2. Write a script that implements the following design: In the Downloads table, the user_id and product_id columns are the foreign keys. Create these tables in the ex schema. Create the sequences for the user_id, download_id, and product_id columns. Include a PL/SQL script to drop the table or sequence if it already exists. Include any indexes that you think are necessary. 3. Write a script that adds rows to the database that you created in exercise 2. Add two rows...

  • Question 1. Show the correct jQuery code for each of the following UI tasks: a) Select...

    Question 1. Show the correct jQuery code for each of the following UI tasks: a) Select all elements with class="name" and give each of them a unique id in the form "name-0", "name-1", "name-2"… and so on b) Anytime an element with class="trackClick" is clicked (using the "click" event), output the text "element clicked" to the console (using console.log()). This must work for all present and future elements with the class "trackClick". Question 2. Assume that there is only one...

  • SQL Question 2 Using your table from question 1: Create a minimum of 4 INSERTS. On...

    SQL Question 2 Using your table from question 1: Create a minimum of 4 INSERTS. On one of your INSERTs, do not specify all of your columns. In other words, if you have 5 columns in your table, only mention 4 or less columns in one of your INSERTs. Be sure to write a comment above the INSERT with less columns and explain what is missing in a full English sentence. You should write a simple SELECT after your INSERTs...

  • Lesson 10Create the DEPARTMENT tables based on the following: Column Name   ID      Name Data Type     Number...

    Lesson 10Create the DEPARTMENT tables based on the following: Column Name   ID      Name Data Type     Number Varchar2 Length        7      25 Populate the DEPARTMENT table with data from the DEPT table. Include only columns that you need. Create the EMPLOYEE table based on the following table chart: Column Name    ID      LAST_NAME     FIRST_NAME     DEPT_ID Data Type      Number Varchar2      Varchar2       Number Length         7       25            25             7 Modify the EMPLOYEE table to allow for longer employee last names. Confirm your modification. Confirm that both the...

  • Need help starting from question 9. I have tried multiple codes but the program says it is incorrect. Case Problem 1 Da...

    Need help starting from question 9. I have tried multiple codes but the program says it is incorrect. Case Problem 1 Data Files needed for this Case Problem: mi pricing_txt.html, mi_tables_txt.css, 2 CSS files, 3 PNG files, 1 TXT file, 1 TTF file, 1 WOFF file 0 Marlin Internet Luis Amador manages the website for Marlin Internet, an Internet service provider located in Crystal River, Florida. You have recently been hired to assist in the redesign of the company's website....

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • how did we get the left null space please use simple way 6% 0-0, 1:44 AM Fri May 17 , Calc 4 4 Exaimi 3 solutions Math 250B Spring 2019 1. Let A 2 6 5 (a) Find bases for and the dimensions of the four...

    how did we get the left null space please use simple way 6% 0-0, 1:44 AM Fri May 17 , Calc 4 4 Exaimi 3 solutions Math 250B Spring 2019 1. Let A 2 6 5 (a) Find bases for and the dimensions of the four fundamental subspaces. Solution Subtract row onc from row 2, then 8 times row 2 from row 3, then 5 timcs rovw 2 fro row. Finally, divide row1 by 2 to get the row reduced...

  • Please complete the following programming with clear explanations. Thanks! Homework 1 – Programming with Java: What...

    Please complete the following programming with clear explanations. Thanks! Homework 1 – Programming with Java: What This Assignment Is About? Classes (methods and attributes) • Objects Arrays of Primitive Values Arrays of Objects Recursion for and if Statements Selection Sort    Use the following Guidelines: Give identifiers semantic meaning and make them easy to read (examples numStudents, grossPay, etc.) Use upper case for constants. • Use title case (first letter is upper case) for classes. Use lower case with uppercase...

  • In this assignment, you will summarize the differences between the four Eukaryotic Kingdoms into a table...

    In this assignment, you will summarize the differences between the four Eukaryotic Kingdoms into a table See the note below the table for information regarding "Kingdom Protista, Once you are satisfied with your table, submit it as usual as an attached file. Be sure to include the assignment name and your name on your document. The assignment will be evaluated based on completeness and accuracy. Total value of this assignment is 19 marks You may want to copy and paste...

  • code in java please:) Part I Various public transporation can be described as follows: A PublicTransportation...

    code in java please:) Part I Various public transporation can be described as follows: A PublicTransportation class with the following: ticket price (double type) and mumber of stops (int type). A CityBus is a PublicTransportation that in addition has the following: an route number (long type), an begin operation year (int type), a line name (String type), and driver(smame (String type) -A Tram is a CityBus that in addition has the following: maximum speed (int type), which indicates the maximum...

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
ADVERTISEMENT