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

Html – How to fix the container width and make it comatibale with figma

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

Tags:

2

Answers


  1. 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/[email protected]/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>
    Login or Signup to reply.
  2. 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search