Bootstrap nos proporciona una serie de clases de utilidades flotantes, que permiten que un elemento flote hacia la izquierda, hacia la derecha o que no flote, al igual que la propiedad flotante de CSS . Además de esto, bootstrap proporciona clases flotantes receptivas, que hacen que un elemento flote según el tamaño de la ventana gráfica.
Puntos de interrupción de Bootstrap:
- sm: ventana gráfica superior a 576 px.
- md: ventana gráfica superior a 768 px.
- lg: ventana gráfica superior a 992 px.
- xl: ventana gráfica superior a 1200 px.
Clases flotantes comunes
- float-left: hace que el elemento flote hacia la izquierda en todos los tamaños de ventana gráfica.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<!-- Custom CSS -->
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container"><!-- For making div responsive -->
<h1 class="head">GeeksForGeeks</h1>
<!-- float-left, bootstrap class -->
<div class="float-left box">
</div>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<!-- Link JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
- Producción:
- float-right: hace que el elemento flote a la derecha en todos los tamaños de ventana gráfica.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<!-- Custom CSS -->
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container"><!-- For making div responsive -->
<h1 class="head">GeeksForGeeks</h1>
<!-- float-right, bootstrap class -->
<div class="float-right box">
</div>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<!-- Link JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
- Producción:
- float-none: hace que el elemento no flote en todos los tamaños de ventana gráfica.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<!-- Custom CSS -->
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container"><!-- For making div responsive -->
<h1 class="head">GeeksForGeeks</h1>
<!-- float-none, bootstrap class -->
<div class="float-none box">
</div>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<!-- Link JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
- Producción:
Clases flotantes receptivas :
| Clase | Descripción |
|---|---|
| float-sm-left | Hace que el elemento flote a la izquierda en la ventana gráfica de tamaño superior a 576px (sm). |
| flotar-sm-derecha | Hace que el elemento flote a la derecha en la ventana gráfica de tamaño superior a 576px (sm). |
| float-sm-ninguno | Hace que el elemento no flote en la ventana gráfica de tamaño superior a 576px (sm). |
| float-md-izquierda | Hace que el elemento flote a la izquierda en la ventana gráfica de tamaño superior a 768px (md). |
| float-md-derecha | Hace que el elemento flote a la derecha en la ventana gráfica de tamaño superior a 768px (md). |
| flotante-md-ninguno | Hace que el elemento no flote en la ventana gráfica de un tamaño superior a 768 px (md). |
| float-lg-izquierda | Hace que el elemento flote a la izquierda en la ventana gráfica de tamaño superior a 992px (lg). |
| flotar-lg-derecha | Hace que el elemento flote a la derecha en la ventana gráfica de tamaño superior a 992px (lg). |
| float-lg-ninguno | Hace que el elemento no flote en la ventana gráfica de tamaño superior a 992px (lg). |
| float-xl-izquierda | Hace que el elemento flote a la izquierda en la ventana gráfica de tamaño superior a 1200px (xl). |
| flotar-xl-derecha | Hace que el elemento flote a la derecha en la ventana gráfica de tamaño superior a 1200px (xl). |
| float-xl-ninguno | Hace que el elemento no flote en la ventana gráfica de tamaño superior a 1200px (xl). |
Ejemplo: float-md-derecha.
html
<!DOCTYPE html>
<html>
<head>
<!-- Custom CSS -->
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container"><!-- For making div responsive -->
<h1 class="head">GeeksForGeeks</h1>
<!-- float-md-right, bootstrap class -->
<div class="float-md-right box">
</div>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<!-- Link JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Producción:
Nota: Podemos usar más de una clase de utilidad flotante simultáneamente para obtener los resultados deseados. Por ejemplo, podemos configurar float-right y float-md-left, para que el elemento flote a la derecha en el tamaño de la ventana gráfica inferior a 768 px y flotar a la izquierda cuando la ventana gráfica sea mayor que 768 px.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<!-- Custom CSS -->
<style>
h1.head{
color: green;
text-align: center;
}
div.box{
height: 150px;
width: 150px;
border: 1px dashed black;
background: #E3F2FD;
margin: 20px;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container"><!-- For making div responsive -->
<h1 class="head">GeeksForGeeks</h1>
<!-- float-right float-md-left, bootstrap classes -->
<div class="float-right float-md-left box">
</div>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<!-- Link JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Producción: