Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Get Bootstrap Jumbotron of full width and without rounded corners
To get a jumbotron of full width and without rounded corners, use the .jumbotron class outside all .container classes and instead add a .container within. This approach makes the jumbotron span the entire viewport width while keeping the content properly centered.
Default vs Full-Width Jumbotron
When you place .jumbotron inside a container, it has rounded corners and limited width. Placing it outside removes these constraints:
| Placement | Width | Rounded Corners | Use Case |
|---|---|---|---|
| Inside .container | Limited | Yes | Card-like appearance |
| Outside .container | Full viewport | No | Hero sections, landing pages |
Example
Here's how to implement a full-width jumbotron without rounded corners:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Full-Width Jumbotron</title>
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<script src = "/scripts/jquery.min.js"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to Our Landing Page!</h1>
<p>This jumbotron spans the full width of the viewport without rounded corners.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">
Get Started
</a>
</p>
</div>
</div>
<div class = "container">
<h2>Regular Content</h2>
<p>This content is within a normal container for comparison.</p>
</div>
</body>
</html>
Structure Breakdown
The key structure is:
<div class="jumbotron"> <!-- Outside container for full width -->
<div class="container"> <!-- Inner container for content alignment -->
<h1>Title</h1>
<p>Content</p>
</div>
</div>
CSS Behind the Scenes
When .jumbotron is outside .container, Bootstrap applies these styles:
- width: 100% (full viewport width)
- border-radius: 0 (no rounded corners)
- margin: No side margins
The inner .container ensures content remains centered and readable on all screen sizes.
Conclusion
Place .jumbotron outside .container for full-width hero sections. The inner container keeps content properly aligned while the jumbotron spans the entire viewport without rounded corners.
391 Views
