What is the best way to adjust the margin in a fluid container?

Why is there no margin on the right side of the box while we can apply margin on the left side of the container? It seems that the intention is to cover the entire horizontal width of the screen.

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5f455d4559">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f79d868292858eb7c4d9c1d9c4">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32425d424257401c584172031c03041c03">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212667c647c60">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

  <div class="container-fluid" style="background-color:pink;padding:15%; margin:15%;">
    <h1>My First Bootstrap Page</h1>
    <p>This part is inside a .container-fluid class.</p>
    <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
  </div>

</body>

</html>

Additionally, I have noticed that the class called container changes width abruptly when the viewport is resized. Is there a way to make the transition smoother like container-fluid but with added margins?

htmlcssbootstrap-5

Answer №1

make sure to use the correct syntax with row and col

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example Using Bootstrap</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abaced4ccd4c8">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78d969282959ea7d4c9d1c9d4">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46362936362334682c3506776877706877">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5a4058405c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid" >
<div class="row" style="background-color:pink;padding:15%; margin:15%;">
<div class="col">
<h1>Example Page Using Bootstrap</h1>
  <p>This section is contained within a .container-fluid class.</p>
  <p>The .container-fluid class creates a full-width container that spans the entire viewport width.</p>           
</div>
</div>
  
</div>

</body>
</html>

Refer to this link for information on spacing in bootstrap:

Spacing in Bootstrap

Answer №2

You have the capability to achieve this using pure CSS without relying on bootstrap

Begin by creating a wrapper div 

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Without Bootstrap</title>
  <meta charset="utf-8><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper" style="background-color:pink;padding:15%; margin:15%;"><h1>My First Bootstrap Page</h1>
  <p>This section is contained within a .container-fluid class.</p>
  <p>The .container-fluid class offers a full-width container that spans the entire viewport.</p>           
</div>
</body>
</html>

Utilize Flex without a container

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2f352d3529">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f298838797808bb2c1dcc4dcc1">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3938c93938691cd8990a3d2cdd2d5cdd2">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067268706874">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="d-flex p-5 m-5" style="background:pink;"><h1>My First Bootstrap Page</h1>
  <p>This section is contained within a .container-fluid class.</p>
  <p>The .container-fluid class offers a full-width container that spans the entire viewport.</p>           
  
</div>

</body>
</html>

Create a container with flex, center both vertically and horizontally, and include a div

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd89938b938f">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650f141000171c25564b534b56">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8c938c8c998ed2968fbccdd2cdcad2cd">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df9e3fbe3ff">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container d-flex align-items-center justify-content-center"><div class="TextOutput" style="background:pink; margin:15%;padding:15%;"><h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           
</div>
  
</div>

</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

Adding a border in jQuery or Javascript to highlight empty form fields

After making the decision to dive into the world of Javascript, I've been dedicated to perfecting a script that will encase empty elements with a border right before the user submits a form. My ultimate goal is to implement live validation in the form ...

javascriptjquerycsshtml

Unique logo loading exclusively on the landing page's navbar

I am currently developing a website using Bootstrap and Flask and have encountered an issue with the logo in the navbar. The problem is that the logo only displays on the landing (home) page and not on any other pages. The navbar code causing the issue is ...

htmlflasknavbarbootstrap-5codeblocks

Animated dropdown feature spanning the entire width of the screen

I successfully developed a basic dropdown menu with full-width sub-menu functionality. Check it out on jsFiddle: $(document).ready(function(){ $(".drop").hide(); $(".link-1").mouseenter(function(){ $('.link-1-drop').slide ...

javascriptjqueryhtmlcssdrop-down-menu

Concealing a button once the collapse feature is toggled in Bootstrap

The following code snippet from the bootstrap website demonstrates how to use collapse functionality: <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href & ...

javascriptjquerycsstwitter-bootstrap

Progress Circles on Canvas in FireFox

Currently, I am experimenting with this codepen demo that utilizes canvas to generate progress circles: The functionality functions perfectly in Chrome and Safari; however, it only displays black circles in FireFox. My knowledge of canvas is limited, so I ...

javascripthtmlcsscanvas

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

javascriptcssthree.js

Dealing with Issues in Projectile Image Display: Solutions for Resolving the Error

I've been attempting to change my projectile from circles to images, but I'm encountering this error File "C:\Users\Habib\Desktop\PYTHONGGAME\py.py", line 353, in <module> bullets.append(projectile(round(player ...

pythoncsspython-3.xpygame

Creating a personalized LinkedIn share button through POST requests: here's how

I am interested in using my own image for the LinkedIn share button. After referencing a previous post on this topic: How to make a custom LinkedIn share button It was mentioned that: In order to create a custom Share button for LinkedIn, POST calls need ...

htmlpost

Having trouble uploading multiple input files in a Flask and HTML form

I'm attempting to upload multiple files using HTML in my Flask application. Below is the HTML form I have been using: <form action="url", method="POST", enctype="multipart/form-data"> <font size="2"> File2: <input type= ...

pythonhtmlflaskread-data

Using CSS, the ability to scroll to the top of a page is restricted when an inner div expands to the top while using flex

While following a tutorial on YouTube, I encountered an issue where my expanding content, when exceeding the size of the window in a small screen view, prevented me from scrolling to the top. Interestingly, I could scroll to the bottom and back up to that ...

htmlcssflexbox

Using jQuery to update a specific item in a list

My current project involves developing an Image Gallery app. It uses <img> tags within li elements. The code snippet is as follows: var $slideR_wrap = $(".slideRoller_wrapper"); var $slidesRoller = $slideR_wrap.find(".slidesRoller"); var $slideR ...

javascriptjqueryhtmlcss

Enhance user experience with jQuery UI sortable and the ability to edit content in real

I am facing an issue with jquery sortable and contenteditable. The problem arises when I try to use jquery sortable along with contenteditable, as the contenteditable feature stops working. After searching on Stack Overflow, I found a solution. However, up ...

javascriptjqueryhtmljquery-uicontenteditable

"Font Awesome appears to be malfunctioning on all versions of Internet Explorer and Microsoft Edge

Having trouble with Font Awesome icons and their compatibility with Internet Explorer. The icons display correctly on all other browsers, but on IE or Edge, there is a blank space where the icon should be. I noticed differences in styling when comparing ...

htmlcssiconsfont-facefont-awesome

Incorporating external CSS stylesheets into a custom LESS framework

Is there a reliable method for integrating a third-party CSS file obtained from an external source into my own LESS compile structure without making many changes to it? I anticipate that the external CSS file may be updated periodically, so I would prefer ...

csslessstylesheet

Having trouble loading a CSS file in CodeIgniter?

I've added a link to my header.php and despite trying various solutions from stackoverflow, it still isn't working for me. Can someone please help? Thank you in advance :) Here's my folder structure: Main Folder: ci_attl - application ...

csshyperlink

struggling to perfect the CSS styling

I am in need of a design similar to the image linked below: https://i.sstatic.net/Er1wT.png I attempted to create this layout using a table, but I have not been successful in aligning the side images properly. testTable.html <style> .container{ ...

htmlcss

Conditionals in Angular 2 using Sass

Looking to apply this style with Sass or CSS: IF :host.form-control MATCHES .ng-valid[required] OR .ng-valid.required THEN :host ::ng-deep input.form-control = border-left: 5px solid #42A948; Appreciate the help! ...

cssangularsass

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

Using ASP .NET controls in conjunction with Bootstrap

Is there a way to easily apply bootstrap classes to all asp .net controls in my application at once? Here is an example of how I formatted my menu control using bootstrap. I am looking for a solution where I can apply the bootstrap theme commonly to all m ...

cssasp.nettwitter-bootstrapwebforms

Modifying the appearance of PHP code by applying CSS styles to the font

Here is the HTML code: <!DOCTYPE html> <html> <head> <title>Greeting Service!</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /& ...

phphtmlcssformsswitch-statement