Html Question posted in
Some basic documentation can be found here.

Html – Extending content to full width in CSS Bootstrap 5

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>
Tags:

2

Answers


  1. 0

    you need to add a css file with these lines below in it with "min-width: 100% !important! to "overwright" bootstrap css for #outer and #inner divs

    #outer{
    min-width: 100% !important;
    /* padding: 0 !important;
    margin: 0 !important; */
}

#inner{
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
    Login or Signup to reply.
  2. 0

    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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search