Capítulo 9 – Estilos y fuentes personalizadas – Curso Diseño Web Responsive con Bootstrap

Curso Diseño Web Responsive con Bootstrap

Capitulo 9 ➜ Estilos y fuentes personalizadas

¿Cómo aplicar estilos CSS personalizados en Bootstrap?

Para aplicar estilos personalizados debemos crear nuevas reglas en un nuevo documento css para e proyecto web.

¿Cómo aplicar estilos CSS personalizados en Bootstrap?

Para aplicar estilos personalizados debemos crear nuevas reglas en un nuevo documento css para e proyecto web.

En Bootstrap, puedes agregar estilos y fuentes personalizadas de varias maneras para adaptarlo a las necesidades de tu proyecto. Aquí te explico cómo hacerlo:

1. Agregar Fuentes Personalizadas

Para usar fuentes personalizadas en Bootstrap, debes seguir estos pasos:

a. Incluir la fuente en tu proyecto

Puedes incluir fuentes personalizadas de dos maneras:

Fuentes de Google Fonts: Puedes incluir una fuente de Google Fonts agregando el siguiente enlace en el <head> de tu archivo HTML:
```
 
```
html
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=NombreDeLaFuente:wght@400;700&display=swap">
```

Fuentes locales: Si tienes archivos de fuentes locales (por ejemplo, .woff, .woff2, .ttf), debes incluirlos en tu proyecto y definir su uso en un archivo CSS. Aquí te dejo un ejemplo de cómo hacerlo:


css

@font-face {
  font-family: 'NombreDeLaFuente';
  src: url('fonts/nombre-de-la-fuente.woff2') format('woff2'),
       url('fonts/nombre-de-la-fuente.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

b. Aplicar la fuente en CSS

Después de incluir la fuente, puedes aplicarla a tu diseño en tu archivo CSS:

css

body {
  font-family: 'NombreDeLaFuente', sans-serif;
}

2. Aplicar Estilos Personalizados

Puedes personalizar los estilos en Bootstrap de varias maneras:

a. Crear un archivo CSS personalizado

Es una práctica común crear un archivo CSS separado para tus estilos personalizados. Asegúrate de enlazar este archivo después de los archivos CSS de Bootstrap en tu HTML para que tus estilos puedan sobrescribir los estilos predeterminados de Bootstrap.

html

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos-personalizados.css">

En estilos-personalizados.css, puedes agregar tus propios estilos. Por ejemplo:

css

.navbar {
  background-color: #f8f9fa;
}

.card {
  border: 1px solid #e0e0e0;
}

.custom-button {
  background-color: #007bff;
  color: #fff;
}

b. Usar variables de Bootstrap

Bootstrap utiliza variables de Sass para definir sus estilos. Puedes sobrescribir estas variables para personalizar Bootstrap antes de compilar el archivo CSS. Aquí te explico cómo hacerlo:

Instalar Bootstrap con npm o yarn:
```
 
```
bash
```
npm install bootstrap
```

Crear un archivo Sass (por ejemplo, custom.scss) y sobrescribir las variables antes de importar Bootstrap:

scss

// Sobrescribir variables
$primary: #007bff;
$font-family-base: 'NombreDeLaFuente', sans-serif;

// Importar Bootstrap
@import 'node_modules/bootstrap/scss/bootstrap';

Compilar el archivo Sass a CSS utilizando un compilador de Sass (como node-sass o dart-sass).

3. Ejemplo Completo

Aquí te muestro un ejemplo completo integrando una fuente personalizada y estilos personalizados con Bootstrap:

html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Bootstrap</title>
    <!-- Fuentes personalizadas -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Estilos personalizados -->
    <link rel="stylesheet" href="css/estilos-personalizados.css">
</head>
<body>
    <!-- Contenido -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Mi Sitio</a>
    </nav>
    <div class="container mt-5">
        <h1 class="text-center">Bienvenido</h1>
        <button class="btn custom-button">Haz clic aquí</button>
    </div>
    <!-- Bootstrap JS -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

estilos-personalizados.css:

css

body {
    font-family: 'Roboto', sans-serif;
}

.navbar {
    background-color: #f8f9fa;
}

.custom-button {
    background-color: #007bff;
    color: #fff;
}

Este enfoque asegura que puedes personalizar Bootstrap y mantener tus estilos organizados en un archivo separado.

1680 visitas

« Capítulo 8 – Sección Contactos

{ Curso Diseño Web Responsive con Bootstrap }

Compartir link con tus amigos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Indice

Maquetación web

1 Integrar Bootstrap 2 Menú de navegación 3 Carrusel de Imágenes 4 Productos en la portada 5 Pie de página web 6 Sección Vestidos 7 Sección Nosotros 8 Sección Contactos 9 Estilos y fuentes personalizadas