Max-width 760px for block in Bootstrap4? - html

I need to set block content width to 760px (best for line-lenght) and center it horizontal on the page. Is it possible in pure Boostrap 4 without own CSS?
With the "col-8" class the block content is 730px wide.
With "col-10 px-5" classes the content of the block is 853,984px wide.
In CSS is it easy:
div{
margin:0 auto;
max-width:760px
}

Could you show your code? if the div is inside a div with class container-fluid, just add col to your div class, it's take all width possible in the screen.

The divs container should have the d-flex justify-content-center classes which will made it to be in center. The max-width means the div's MAXIMUM width will be 760px only if the inner content is that wide. You need just width for that.
OR in boostrap the row class is display:flex by default, you can use that too. Just pay attention to the default margins. (margin-left/margin-right: -8px)
<div class="container d-flex justify-content-center">
<div> // with the style="width: 760px;"
</div>
</div>
<div class="row justify-content-center mx-0">
<div> // with the style="width: 760px;"
</div>
</div>

Related

Image inside a flexbox overflows, and setting max-height does not work

This is the demo of my problem.
And this is the outline of my HTML:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child">
<img/>
</div>
</div>
</div>
Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.
And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.
It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.
To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.
You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.
Here's the updated code:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child" style="overflow: hidden;">
<img style="max-width: 100%; width: auto;" />
</div>
</div>
</div>
Add the two tailwind classes h-full object-cover to your image tag.
<img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>
I've figured out myself by learning more about how flexbox works.
This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.
Now my layout looks like this:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<img/>
</div>
</div>
I removed f2-child from the last version.
The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.
Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.
And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.
For more details you could see this post: Prevent flex items from overflowing a container

Height as per resolution in HTML

I have added content div in which having two column div as col-md-3 and as col-md-9
In <div class="col-md-3"> in between having tabular panel menu and in tabular menu have one accordion with scroll effect.
With having min-height: 329px !important
When i check on browser with 1366*768 it looks good with same height
for <div class="col-md-3"> and for 2nd div` with same height
but when i change resolution of pc it conflicts
I want same height as per 2nd div having class .col-md-9
please give me solution on that.
display:flex is the correct solution for you apply this property in parent div like this
HTML
<div class="parent">
<div class="col-md-3">
// you content here
</div>
<div class="col-md-9">
// you content here
</div>
</div>
CSS
.parent{
display:flex;
}
This will make equal height of elements in .parent.
You can add another class on the divs like this class="col-md-3 sameheight" and class="col-md-9 sameheight" and than style it giving a static height if this is what you want.
.sameheight
{
height: 300px //for example
}
For the responsivnes than you can work with media queries. But also the display: flex for the parent of 2 divs is a good solution if it is applicable to you.

Bootstrap responsive grid issue

I've setup a bootstrap grid like so:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!-- content -->
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!-- content -->
</div>
<!-- More cols -->
</div>
The number of cols to display on each grid row should depend on screen size so I find it difficult to specify more div class="row" or do div clearfix to insert breaks. That's why all cols are inside the same div class="row".
It all works fine in mobile view (width < 500) and desktop/tablet landscape (width > 1024), but in between those widths the row + cell content goes beyond the screen with horizontal scrolling and thus the images doesn't center align.
You can see it live here if you resize your width to around 700-750. I've been trying to debug why this is happening, but I can't figure out what I'm doing wrong. Anyone care to help?
You Define min width in
"#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper"
{background: #fff none repeat scroll 0 0;
min-width: 960px;
width: 100%;}
Remove this min-width.
Second Thing you add width your Custom CSS for add.css Line No.6
this width remove or add max-width & try.
.container {
margin: 0 auto;
width: 960px;}
If you are talking about 700-750px then simply remove the max-width from .container class and also from remove max-width from this #header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper.
I have edited my answer but please go with lalji's answer..

Fixed position div inside reponsive div with angularjs and bootstrap

I have a page layout that involves a fixed sidebar to the left and a main container on the rest of the page to the right. Inside that right side container which is a div I have 2 elements
<div class="col-sm-12 col-md-5 col-lg-3">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
The content of the second div is long so scrolling is implied.
What I want to do is make the first div sticky. So I applied a position:fixed to it in css but that takes it out of the context of the right side container which means the css classes responsive width don't work anymore. Also the 2 divs overlap.
I am looking for a clean way to handle this. The best I thought of is using a dummy div like so :
<div class="col-sm-12 col-md-5 col-lg-3 dummy-div">
</div>
<div class="col-sm-12 col-md-5 col-lg-3 sticky-div">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
With this I thought of creating an element directive that uses jquery to set the witdh of sticky-div to the width of the dummy-div.
I still think this isn't a very nice solution though, and was wondering if there is a cleaner way?
First off do not duplicate Class you should just have one class="" with all of your class' inside it.
Instead of creating a dummy div to compensate from flow removal you should just give the non fixed <div> a margin or padding to compensate for the loss of the fixed <div>.
You could just use j query to gram the width of the container and inject like you mentioned.
another idea would be to use dynamic widths and match them up to the container.
e.g. 50% couple that with calc and I don't see any reason why you cant achieve the exact width of the so called parent of the fixed <div>.
The solution I went for in the end was keeping the dummy div and then calculating the width of the fixed div with media queries.
#media only screen and (max-width : 1200px) {
position: fixed;
width: 30%;
margin-left: 1.3em;
}
#media only screen and (max-width : 992px) {
position: relative;
width: 95% ;
margin-right: 1.3em;
}
I also needed the div to not be fixed for small screens where the layout goes vertical.

adapt bootstrap3 grid size to my needs

I have to make a very simple responsive website, thinking to use Bootstrap 3. First time playing around...
All content is maximum width 960px, very simple, just header (960px), a main interface (630px) and a sidebar (320px), with an space of 10px between both.
When we are on small devices, the sidebar should be stacked under main interface.
So, I know that Bootstrap3 accepts 12 grids, each grid maximum 70px + max 30px gutter (dividing each grid).
If I apply the code below...
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>my Header, should be 960px</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 ">This should be 630px</div>
<div class="col-sm-4 col-xs-12">This should be 320px</div>
</div>
</div>
Of course I allways get a 1170px in all content (8+4=12 grids) in desktop devices.
How can I do to make the content 960px width?
Wrap your rows in a fixed width container like..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
The row and col-* will still work responsively inside the fixed width container.
Here's a working demo: http://bootply.com/96043