-1

so I have a figma design and I use the container width from bootstrap and when I see the figma desgin which I cann't edit the width for the pages are more bigger than the contaienr width how to fix that to make the web page excatly like the figma desgin

I try to make the container more bigger did alot of problems with the resposive

Matthew
  • 1

2 Answers2

0

If you want a bigger container than the parent container to follow the Figma design then you can do it with many techniques. Here is one way to do it with position: absolute There should not be any responsive issue with this one.

.custom-width-container{
      position: absolute;
      width: 1440px; /* Put the value of the width as you want */
      left: calc(50% - 720px); /* Subtract half of the width to align it into the center  */
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  

<div class="container" style="height: 400px; background: tomato; display: flex; align-items: center;">
  <div class="custom-width-container" style="height: 100px; background: rgb(18, 1, 66);">
    <!-- your content -->
  </div>
</div>
Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
0

Brother, Frist of all please try to add more inputs while asking the question. As I understood your problem, Here is the simplest solution, you don't need to add position on container, If you are able to edit structure please try add container on each section separately and add container-fluid or custom container class on that particular div so it will be bigger then container class. Interesting part is this is a responsive solution.

Hope this solution will solve your problem :)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container-fluid p-5 my-5 bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

</body>
</html>
brijesh bhatore
  • 55
  • 3