Issue
I am new to Bootstrap and trying to customize an existing example of Bootstrap. My goal here is to extend the div tag (with id "inner") to full width of the screen.
I tried a lot of different ways but it didn't seem to work, including resetting the margin and padding on the horizontal. I also tried to use flex-box on the div tag with id "outer" and it didn't work. For all of the previous methods, for some reason the "inner" div tag is not in the center any more.
The last method I used was creating a new div.container-fluid tag which was inside the "outer" tag and covered the whole "inner" div tag. However, it didn't work as well.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container my-5" id="outer">
<div class="p-5 text-center bg-body-tertiary rounded-3" id="inner">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"></use></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
</p>
<div class="d-inline-flex gap-2 mb-5">
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
Call to action
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"></use></svg>
</button>
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
Secondary link
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Solution
Make both containers container-fluid
and put padding (p-0
) and margins (m-0
) to 0 size.
You can decide if you still wish to have p-5
on the inner container;
I put ugly borders on to show what is where only.
#outer{border: solid #00ff00 1px;}
#inner{border: solid #ff0000 1px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid my-5 p-0" id="outer">
<div class="p-5 container-fluid text-center m-0 bg-body-tertiary rounded-3" id="inner">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"></use></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
</p>
<div class="d-inline-flex gap-2 mb-5">
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
Call to action
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"></use></svg>
</button>
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
Secondary link
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Answered By - Mark Schultheiss
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.