0
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Importando o css do bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style2.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<style>
table {
width: 84%;
position: absolute;
right: 10px;
}
.table-bordered {
width: 80%;
position: absolute;
right: 25px;
}
table,
th,
td {
border: 1px solid black;
border-radius: 10px;
}
th,
td {
padding: 20px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<span id="center11"><h1 style="color:pink;">Ingredientes</h1></span>
<div class="menu">
<ul>
<li style="color:aliceblue"><i class="fas fa-home" aria-ridden="true" id="opa"></i>
<a href="home.html">
<h3 style="color:aliceblue">Home</h3>
</a>
<br>
</li>
<li style="color:aliceblue"><i class="fas fa-user" aria-ridden="true" id="opa"></i>
<a href="c_funcionario.html">
<h3 style="color:aliceblue">Funcionarios</h3>
</a>
<br>
</li>
<li style="color:aliceblue"><i class="fas fa-address-book" aria-ridden="true" id="opa"></i>
<a href="c_cliente.html">
<h3 style="color:aliceblue">Clientes</h3>
</a>
<br>
</li>
<li style="color:aliceblue"><i class="fas fa-birthday-cake" aria-ridden="true" id="opa"></i>
<a href="c_produtos.html">
<h3 style="color:aliceblue">Produtos</h3>
</a>
<ul>
<li><a href="c_ingredientes.html">Ingredientes</a></li>
<li><a href="estoque.html">Consulta</a></li>
</ul>
<li style="color:aliceblue"><i class="fas fa-dolly" aria-ridden="true" id="opa"></i>
<a href="c_encomenda.html">
<h3 style="color:aliceblue">Encomenda</h3>
</a>
</li>
</li>
</ul>
</div>
<div id="table">
<div class="row ">
<div class="col-md-12">
<div class="container ">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Ingredientes</th>
<th>Código Ingredientes</th>
<th class="actions">Ações</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Conteúdo</td>
<td>Conteúdo</td>
<td class="actions">
<a class="btn btn-success btn-xs" href="view.html">Visualizar</a>
<a class="btn btn-warning btn-xs" href="edit.html">Editar</a>
<a class="btn btn-danger btn-xs" href="#" data-toggle="modal" data-target="#delete-modal">Excluir</a>
</td>
</tr>
<tr>
<th>2</th>
<td>Conteúdo</td>
<td>Conteúdo</td>
<td class="actions">
<a class="btn btn-success btn-xs" href="view.html">Visualizar</a>
<a class="btn btn-warning btn-xs" href="edit.html">Editar</a>
<a class="btn btn-danger btn-xs" href="#" data-toggle="modal" data-target="#delete-modal">Excluir</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container">
</div>
<center><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyModal">Cadastrar</button></center>
<div id="MyModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="container">
<div class="row centered-form">
<div class="col-xs-16 col-sm-6 col-md-6 col-sm-offset-4 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Registro de Ingredientes</h3>
</div>
<div class="panel-body">
<form role="form">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="cod_ingrediente" id="cod_ingrediente" class="form-control input-sm" placeholder="Codigo do Ingrediente">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="nome_ingrediente" id="nome_ingrediente" class="form-control input-sm" placeholder="Nome do Ingrediente">
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address">
</div>
<input type="submit" value="Register" class="btn btn-info btn-block">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<!-- Importando o jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Importando o js do bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/java.js" type="text/javascript"></script>
</html>
What did you mean by "below the screen"? You could put it like it should be the result?
– Woss
seeing your html one thing caught my attention: we use the class "container" and inside it the columns ("Row" and "col-xxx"), but in your case is the opposite, "container" inside "col", already tried to change this?
– Ricardo Pontual
The structure of your HTML and the Bootstrap classes are very confusing. If you are starting now and have time I suggest a general review of your code. Be sure to read the official BS Grid documentation: https://getbootstrap.com/docs/3.3/css/#grid
– hugocsl
Unfortunately I don’t have much time, it’s for a college project,
– Hedgar Ramos Pierin
Anderson Carlos, I want the tebela in the center on the right side of the menu, and below it on the right the register button, there in the image it is below the menu and the boot on the left of it
– Hedgar Ramos Pierin
Ricardo Punctual, I took this project from a guy who left college soon Gra, he was not using the bootstrap, to redo using the bootstrap, but tbm am not good yet in it
– Hedgar Ramos Pierin