AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Bootstrap Fluid Layout



Bootstrap Tutorial » Bootstrap Fluid Layout

In Bootstrap you can use the class .container-fluid to create fluid layouts to utilize the 100% width of the viewport across all device sizes (extra small, small, medium, large, and extra large).

Next, add rows within a .container-fluid using .row class. Further column can be created using grid classes like .col-xs-*, .col-sm-*, .col-md-*,.col-lg-* .

The next example, fluid layout will covers 100% width of the screen. This layout will still responsive and you can use the grid classes as usual.

 

Creating Bootstrap Fluid Layout - example

The following example shows Bootstrap Fluid Layout:

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fluid Layout Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">Tutorial</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Domains</a>
<a href="#" class="nav-item nav-link">Hosting</a>
<a href="#" class="nav-item nav-link">Emails</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1>Learn how to Create Websites</h1>
<p class="lead">How to Create a Profitable and Professional Website - Complete Guide</p>
<p class="lead">
With this complete guide you will learn how to create a website step by step professionally and above all that is profitable. The idea is to make a website that is really worth it, that becomes a project in the medium and long term with which you can meet your objectives.</p>
<p><a href="https://www.tutorialsw3.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>

</div>
<div class="row">
<div class="col-md-4">
<h2>HTML</h2>
<p>In any case, whether you are a newbie or not, to create a professional website I recommend that you use WordPress due to the large amount of information on the Internet, its enormous customization possibilities and its simplicity of use.</p>
<p><a href="https://www.tutorialsw3.com" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>CSS</h2>
<p>To implement a responsive design we can make use of the media queries, which is a module introduced in CSS3 that allows specifying different CSS rules depending on whether one or other conditions are met, although the most common is to use them to apply rules according to the dimensions of the screen.</p>
<p><a href="https://www.tutorialsw3.com" target="_blank" class="btn btn-success">Learn More »</a></p>

</div>
<div class="col-md-4">
<h2>Bootstrap</h2>
<p>If we just want to use Boostrap to create a layout, we can simply include bootstrap-grid.min.css, which only includes the grid system and Flex utilities. But the normal thing is that we want to use other styles, so we include bootstrap.min.css inside the <head>, either from the path in which we have uploaded the framework to our server, or from the Bootstrap CDN:</p>
<p><a href="https://www.tutorialsw3.com" target="_blank" class="btn btn-success">Learn More »</a></p>

</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright &copy; 2019</p>
</div>
<div class="col-md-6 text-md-right">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>

 

Fluid Container

You can create a full width container by using the .container-fluid class as shown below.

<div class = "container-fluid">     ...  </div>
bootstrap 2 column fluid layout

bootstrap fluid layout
Bootstrap Fluid Layout - bootstrap

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...