1

Tengo un html y debe de quedar asi

introducir la descripción de la imagen aquí

Me falta el color de la letra y que lo "blanco" sobresalga un poco pero nos e como hacerlo a ver si podeis ayudarme os dejo mi codigo.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html xmlns:th="https://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Getting Started: Handling Form Submission</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style="background-color: black">        
        </br> </br> </br> </br> </br> </br> </br>
        <div class="container">
            <div class="row">                
                <div class="col">                    
                </div>
                <div class="col-5" style="background-color:whitesmoke;border: 20px solid darkred"> 
                    </br>
                    <div class="">
                        <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
                            <fieldset>                                
                                <legend class="text-center header"><font size="6">Calcula el area y longitud</font></legend>
                                <p>Introduce el radio de la circunferencia y pulse calcular</p>                                
                                <div class="form-group">     
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                    <div class="col-md-24">                                        
                                        <input th:field="*{radio}" id="nombre" type="numbre" placeholder="Radio(mm)" class="form-control">                                        
                                    </div>  
                                </div>  
                                <div class="form-group">
                                    <div class="col-md-22 text-center">
                                        <button type="submit" class="btn btn-primary btn-lg btn-block bg-sucess" style="background-color: darkred" >Calcular</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="col">                   
                </div>
            </div>
</br> </br> </br> </br> </br> </br> </br>
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

3
  • El colo tenue de los textos a eso te refieres?
    – user128299
    el 15 abr. 2020 a las 17:58
  • ¿A qué te refieres con que lo blanco sobre salga?
    – user128299
    el 15 abr. 2020 a las 17:59
  • añade la clase text-secondary de boostrap 4 en la etiqueta p y en la etiqueta font, aunque deberías remplazarla por una h
    – 404
    el 15 abr. 2020 a las 18:12

2 respuestas 2

1

Creo que te refieres a la sombra que tiene la caja blanca. Eso se añade con la propiedad box-shadow` de css.

He añadido clases de css para modificar los estilos que ya tenias.

<!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html xmlns:th="https://www.thymeleaf.org">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
            <title>Getting Started: Handling Form Submission</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        </head>
        <body style="background-color: black">        
            </br> </br> </br> </br> </br> </br> </br>
            <div class="container">
                <div class="row">                
                    <div class="col">                    
                    </div>
                    <div class="col-5" style="background: darkred;padding: 20px;"> 
                        
                        <div style="background: whitesmoke;padding: 20px;box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.4); ">
                            <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
                                <fieldset>                                
                                    <legend class="text-center header"><font size="6">Calcula el area y longitud</font></legend>
                                    <p>Introduce el radio de la circunferencia y pulse calcular</p>                                
                                    <div class="form-group">     
                                        <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                        <div class="col-md-24">                                        
                                            <input th:field="*{radio}" id="nombre" type="numbre" placeholder="Radio(mm)" class="form-control">                                        
                                        </div>  
                                    </div>  
                                    <div class="form-group">
                                        <div class="col-md-22 text-center">
                                            <button type="submit" class="btn btn-primary btn-lg btn-block bg-sucess" style="background-color: darkred" >Calcular</button>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div class="col">                   
                    </div>
                </div>
    </br> </br> </br> </br> </br> </br> </br>
                <!-- Optional JavaScript -->
                <!-- jQuery first, then Popper.js, then Bootstrap JS -->
                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        </body>
    </html>

2
  • alguna forma de ahorrame el Css es que es para meterlo en spring boot para mvc y no se si ira bien
    – unknow
    el 15 abr. 2020 a las 21:34
  • he actualizado mi respuesta y puedes poner los estilos en línea como ya lo tenias antes.
    – hawks
    el 15 abr. 2020 a las 21:38
1

Bootstrap tiene clases como text-muted y h4 entre otras, que fue lo que ese. Dime si esta bien asi o es necesario modificar algo.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html xmlns:th="https://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Getting Started: Handling Form Submission</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style="background-color: black">        
        </br> </br> </br> </br> </br> </br> </br>
        <div class="container">
            <div class="row">                
                <div class="col">                    
                </div>
                <div class="col-5" style="background-color:whitesmoke;border: 20px solid darkred"> 
                    </br>
                    <div class="">
                        <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
                            <fieldset>                                
                                <legend class="h4 text-muted">Calcula el area y longitud</legend>
                                <p class="small text-muted">Introduce el radio de la circunferencia y pulse calcular</p>                                
                                <div class="form-group">     
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                    <div class="col-md-24">                                        
                                        <input th:field="*{radio}" id="nombre" type="numbre" placeholder="Radio(mm)" class="form-control">                                        
                                    </div>  
                                </div>  
                                <div class="form-group">
                                    <div class="col-md-22 text-center">
                                        <button type="submit" class="btn btn-primary btn-lg btn-block bg-sucess" style="background-color: darkred" >Calcular</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="col">                   
                </div>
            </div>
</br> </br> </br> </br> </br> </br> </br>
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

5
  • solo deberia ser mas ancha, y no veo sensacion de sobre salir lo blanco
    – unknow
    el 15 abr. 2020 a las 21:33
  • Sobre salir lo blanco? perdón pero te comprendo!
    – user101604
    el 15 abr. 2020 a las 22:26
  • a ver da la sensacion como de 3d como de tener una sobra que da la sensacion de que lo blanco esta por encima no se si me explicpo
    – unknow
    el 15 abr. 2020 a las 23:06
  • Hola en BootStrap3 el modelo de grilla usa 12 columnas (no uso BS4 de modo que no se si haya cambiado) si asignas <div class="col-2"> al primer y último divs y al central (que dice <div class="col-5" ) le asignas <div class="col-8" etc lo tienes suficientemente ancho.
    – quevedo
    el 15 abr. 2020 a las 23:16
  • Comprendo, en ese caso, bootstrap tiene una clase llamada shadow lo que le daría el efecto 3d. No es necesario colocar estilos dentro de un div, bootstrap tiene bg-white para fondos blancos, p-1 para padding y como dije antes, shadow.
    – user101604
    el 15 abr. 2020 a las 23:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.