Bootstrap - Issue with Margins on Container - html

I'm trying to set even left and right margins on a container using the Bootstrap spacing property mx-#, but this causes the container alignment to go crazy - see image attached. I want to apply margins to large, medium, and small breakpoints, but have the container stay centered. I've applied my own custom css of max-width to the container. Also, I already tried turning box-sizing: border-box on and off, but this didn't seem to help either. Any ideas how to fix this?
* {
box-sizing: border-box;
}
.container {
max-width: 960px;
}
<div class="container bg-white text-dark px-4 my-lg-5 my-md-4 my-3 mx-3">
<!--mx-lg-5 mx-md-3 mx-sm-0 // px-lg-4 px-md-3 px-sm-0 px-0-->
<div class='row'>
<div class='col-12'>
<h3>About me</h3>
<hr>
</div>
</div>
</div>

Try giving these css properties as well, width:100%. also could you paste the code, it will be helpful to debug

Related

bootstrap 5 bs-gutter-x throws off div's

My div alignment is being thrown off by the default .row class. It has a margin_left and right call that adds gutters that make borders go off my div. I've turned off gutters in this element, but it causes issues elsewhere on the site.
Here is an example of code that causes an issue.
<div class="row border-top border-bottom">
<p id="body">
</p>
</div>
Here is a screen shot of the issue along with an inspect where I show the exact element I can turn off that fixes the issue.
According to the Docs using g-0 will turn off gutters for that .row.
<div class="row g-0 border-top border-bottom">
<p id="body">
</p>
</div>
Give it a try.
Only columns (col-*) should be the immediate child of row.

How to set a max width for html div for mobile devices using css

On Desktop screens everything is responsive and okay. But on mobile devices content doesn't fit the screen, I have to swipe to the left to see all the content, is there anyway to fix that using CSS?
<div class="row mx-md-5 px-md-4 px-5 mt-3 container">
<blockquote class="blockquote">
<div class="mb-0">Quote...
</div>
</blockquote>
<div class="article">
<h1>......</h1>
<img>
<p>........</p>
...............
</div>
</div>
This just an example to work with.
And btw I'm using Md-bootstrap as font end framework.
This div element has a width of 500px, and margin set to auto.
div.container {
width:500px;
margin: auto;
}

Overflow causing entire page to scroll

I am trying to create a page that doesn't scroll. Certain child elements on the page can scroll, but I'm trying to prevent the page as a whole from scrolling. I have a very nested child element that, when overflowed, receives a scroll bar, but also causes the main document to grow and receive a scroll bar as well.
This is the heart of the issue, but there are a few more nested levels that may be a factor.
<div class="h-100 d-flex flex-column">
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
</div>
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
</div>
<div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
<div class="bg-gray m-4" style="height: 2000px;">
The height of this content causes BOTH scroll bars to appear. I only want a bar on the
'green section'
</div>
</div>
<div class="bg-red flex-grow-1">
</div>
</div>
This code pen demonstrates how my app is set up. The overflowing element is nested deep within many flex displays (coming from bootstrap 4 utility classes).
https://codepen.io/averyferrante/pen/YMdNpO
I want only the green section from the code pen to scroll, not the entire document to grow/scroll as well.
The problem is that a couple of your containers are missing height definitions. As a result, the children of those containers ignore the percentage heights applied to them.
Add this to your code:
<div class="flex-grow-1" style="height: calc(100% - 48px);">
This height rule gives the container a defined height while compensating for the height of its sibling.
Another height rule was missing three levels down:
<div class="d-flex flex-column w-100" style="height: 100%;">
revised codepen
More detailed explanations:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
Did you try playing with position: absolute? You can then set width and height as needed and the red box will see its scrollbar disappear!

Horizontal scrollbars issue

* {
box-sizing: border-box;
}
Hasn't helped also
http://codepen.io/samducker/pen/YpQejY
Can't for the life of me find out why I have a tiny bit of white space on the right. Have tried removing stylesheets one by one and going through margin and padding and have still had no luck.
Please help me!
You have to add container-fluid class to the section with class="header". See the following piece of code:
<section class="header container-fluid">
<div class="row">
<div class="col-md-12"><img class="img-responsive center-block" src="http://thehedonistproject.com/launch/img/team.png" alt=""></div>
</div>
</section>
The problem is that bootstrap require that each element with class row has to be contained inside an element that have a container or container-fluid class to assign the right margins and paddings.
Or just get rid of the annoying margin on .row
.row {
margin:0 !important;
}

Adding top/bottom padding to .col-xx when they stack in bootstrap

When using bootstrap 3.3, what's the correct way to add padding between columns once they go from horizontal to stacked vertical. For example, if I have the following code below, when they stack vertical at the xs breakpoint, the top block and bottom block are sandwiched together without padding/margin between them. I don't want to put padding on the col-sm-7 because I don't need it there when the columns are side by side. I suppose one way would be to make a specific class that uses media queries to add padding at the xs breakpoint, but curious if there are any other solutions out there...or if I'm missing something in bootstrap.
<div class="row">
<div class="col-sm-7">
<div>Plan 1: Basic</div>
<div>$99 per month</div>
<div>4 of 5 slots used</div>
</div>
<!-- WHEN THESE STACK I NEED SPACE BETWEEN THEM -->
<div class="col-sm-5">
<div class="text-right">
<div><button class="btn btn-sm btn-block">Manage Users</button></div>
<div><button class="btn btn-sm btn-block">Manage Plan</button></div>
</div>
</div>
</div>
There is no top and bottom padding on .row and .col-X-X in Bootstrap, the reason why you see vertical spacing in their examples is because the content inside the .col-X-X is inside a p, ul, form, h1-h6, etc., tag which has top and bottom margin. If you used, instead of div, a p tag you would get some vertical space. If that's not agreeable, generally I make a vertical spacer like this:
<hr class="vertical-spacer visible-xs">
Using the responsive utilities to indicate when you want that space to show up.
CSS
hr.vertical-spacer {
border: 0px;
background: none;
margin: 2% 0;
height: 1px;
width: 100%;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Adding padding at the max-width media query would also work, however you would get extra spacing when you do put your content inside p, h1-h6, and so forth, and this would not be consistent or recommended, that's why there's no padding/margin directly on the .col-X-X classes by default.
Simply adding this html in the top can give you a small space.
<div class="row">.</div>