What is the best way to center content within a container-fluid while also aligning it with a regular container in

How can I create a full-width element on my website inside a fluid container among regular containers?

Is there a way to always align the content within the container-fluid with the content in the normal container, even when resizing the website?

Here is an example of what I currently have: https://i.sstatic.net/g6a33.png

This is what I am aiming for: https://i.sstatic.net/tO2FQ.png

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Website title</h1>
</div>
<div class="col-12">
<p>Website description</p>
</div>
</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-12 p-0" style="background-color: thistle; border: 1px solid black;">
<div id="box" style="margin: 30px; border: 1px solid black;">
<h2>Full width content</h2>
</div>

</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-12">
<p>Some more website description</p>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

htmlcssbootstrap-4

Answer №1

One way to position a column on the left side is by using an offset class. You can adjust the offset width to fit your needs. Hopefully, this solution proves helpful for you.

<div class="container-fluid">
            <div class="row">
                <div class="col-md-8 offset-md-4 p-0" style="background-color: thistle; border: 1px solid black;">
                    <div id="box" style="margin: 30px; border: 1px solid black;">
                        <h2>Full width content</h2>
                    </div>

                </div>
            </div>
        </div>

Answer №2

Kindly review the code below to modify your HTML structure as suggested by @Paulie_D. Hopefully, this adjustment will resolve the issue for you.

<html>
      <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      </head>

      <body>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <h1>Website title</h1>
            </div>
            <div class="col-12">
              <p>Website description</p>
            </div>
          </div>
        </div>

        <div class="container-fluid">
          <div class="full-width-section" style="background-color: thistle; border: 1px solid black;">
            <div class="container">
              <div class="row">
                <div class="col-12">
                  <div id="box" style="margin: 30px 0px; border: 1px solid black;">
                    <h2>Full width content</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>Some more website description</p>
            </div>
          </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      </body>
    </html>

Answer №3

To ensure proper styling, you can define the max-width CSS property for elements within the .container-fluid using the .container class.

.my-container {
    border: 1px solid blue;
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px;
}

Don't forget to incorporate media queries for responsiveness.

.container{
  border: 1px solid red;
}
.container-fluid {
  border: 1px dotted black;
}
.my-container {
  border: 1px solid blue;
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px;
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap 4 Page</h1>
  <p>Adjust the screen size to see the responsive design in action!</p> 
</div>

<div class="container-fluid my-3">
  <div class="my-container my-4">    
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg">Fake Image</div>
    <p>Learn more about me and what I enjoy doing.</p>
    <h3>Useful Links</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>  
</div>

</body>
</html>

Answer №4

To enhance the layout, insert an extra .container within your existing .container-fluid.

Afterwards, make any necessary adjustments to margins/padding.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Website title</h1>
      </div>
      <div class="col-12">
        <p>Website description</p>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="container">
    <div class="row">
      <div class="col-12 p-0" style="background-color: thistle; border: 1px solid black;">
        <div id="box" style="margin: 30px; border: 1px solid black;">
          <h2>Full width content</h2>
        </div>

      </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Some more website description</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Alignment Problems in HTML5 and CSS

Check out my awesome page here: My Page To help with troubleshooting, I've assigned different background colors to the 3 sections of my page. The "Zine" should be red, the "Book Cover" green, and the "Magazine" yellow. However, I'm experiencing ...

htmlcss

Issue of Modal not hiding persists despite attempted solutions using JS, jQuery, and CSS

I am attempting to display a modal exclusively on mobile devices. Despite my confidence in the correctness of my JavaScript, it is not functioning as expected. Would anyone be willing to review and provide assistance? <div class="col-5 col-sm-2 ml-au ...

jqueryhtmlcssbootstrap-modalbootstrap-4

show the contents of the successful jQuery AJAX response

When using jQuery AJAX, I am retrieving values from a database and then trying to display them in a dropdown menu. Initially, I pass the ID to fetch the level. Once I have the level ID and name, I then fetch the values related to the selected level and dis ...

c#jqueryhtmlajax

Is there a way to surround my cursor with a <div> box when clicked?

Looking to replicate the tagging feature on Facebook, I want an empty box to appear when a specific area of an image is clicked. With jQuery, what code can be used to make this box follow the cursor upon clicking? Appreciate any guidance. Thank you! ...

jquerycss

occupying half of the screen

Having trouble displaying two videos in an ionic grid. My goal is to have both videos take up the entire screen, with each occupying 50% height and 100% width. However, when I try to achieve this, the ion-row only takes up 50% of the screen and the video i ...

htmlcssionic-frameworkhtml5-video

Comparison of XPath operators //* versus //element versus //

My mind is a bit muddled when it comes to finding XPath: I'm not sure when to use //* at the beginning and when just // will suffice. For instance, I recently encountered this issue while trying to understand it on . On their homepage, there is a sea ...

htmlxmlselenium-webdriverxpath

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Creating a Random Initial Index using jQuery

Is there a way to set a default variable as a random number within a specific range (such as between 1 and 100)? var defaults = { start_at_index: getRandomNumberInRange(1, 100), It's necessary for the default value not to be zero, but rather a rando ...

jqueryhtmlcss

Easy PHP navigation options

Creating a basic PHP page with includes is proving challenging when it comes to navigating URLs using '../' to find the correct path to the folder. Is there a straightforward way to set up a simple PHP navigation without involving MySQL or other ...

phphtml

The specified locator for the robot framework element could not be located

During my application testing in robot framework using RIDE editor, I encountered the following error. The element with the locator 'xpath: //*[contains(text(), "Applicant")]' was not found. Interestingly, the HTML page does contain the Appli ...

htmlseleniumrobotframeworkangular4-forms

Is creating an expanding tab in CSS a difficult task?

I am in the process of developing a college website and I am curious about the difficulty level involved in creating an expanding tab on the side of the webpage. The idea is that when users hover over the tab with their mouse, it would expand to reveal add ...

htmlcsstabs

Issue with the for loop functionality in a less CSS mixin

After observing that a section of Less that I believed was functioning correctly is not producing all the styles I require, I realized that my for loop is not functioning properly. The specific less code snippet in question is: .for(@list, @code) { & ...

cssnpmgruntjsless

Creating content on HTML AzureWebApp for transfer to CDS

Currently, my web app is running on azurewebsites.net. I am looking to extract data from a text field or captured photos and save it in the CDS / Dynamics 365 CE database. The website design is complete; I just need to focus on storing the data efficient ...

htmldynamics-crmazure-web-app-servicemicrosoft-dynamicscommon-data-service

Ideas for utilizing jQuery to extract data from CSS files

Hey there, I'm facing an issue on my HTML page where I have jQuery included. In my CSS file, I have quite a lot of lines and I'm trying to figure out how to read all styles for a specific element from the external CSS file rather than the inline ...

javascriptjqueryhtmlcss

Hover effect affecting adjacent divs on left and right sides

My navigation bar, known as .navbar, consists of 7 direct child elements called navbar-item. Currently, I have implemented a hover effect where the width and height of a navbar item increase by 20px upon hovering. However, my goal is to enhance this inter ...

htmlcss

In the event of a 404 error, simply direct the user to the pageNotFound before ultimately guiding them back

I'm developing a website with Node JS and I want to implement a feature where if the user attempts to navigate to a non-existent page, they are redirected to a "Page Not Found" message before being automatically taken back to the home page after a few ...

javascripthtmlnode.jsejs

Conditional HTML for the latest version of Microsoft Outlook, released in 2019

I am in the process of constructing an HTML code for a newsletter campaign. My main challenge is to come up with a solution for an if statement that generates code specifically for Microsoft Outlook 2019. This code snippet works for both Outlook 2016 and ...

htmlcssoutlook

What steps can be taken to adjust the alignment of a Bootstrap Dropright menu so that it opens in an upward direction instead of the standard downward

My dropdown menu is dropping towards the right correctly, but it is going downwards and getting hidden under my page. I want it to open upwards instead of downwards. I attempted to adjust the CSS, adding bottom:0 to the dropdown-menu, but unfortunately, i ...

htmlcssdrop-down-menubootstrap-4

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Several problems with CSS regarding DIV height set to 100% and the content inside

I'm facing a bit of a puzzle here. I have a div that spans the full height of the browser, with a background set to 100% size and image content contained in two inline divs that are vertically aligned in the middle. In one of these divs, the image is ...

htmlcss