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/popper.js@1.16.0/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?
    – BetaM
    el 15 abr. 2020 a las 17:58
  • ¿A qué te refieres con que lo blanco sobre salga?
    – BetaM
    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/popper.js@1.16.0/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/popper.js@1.16.0/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!
    – Sebastian
    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.
    – Sebastian
    el 15 abr. 2020 a las 23:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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