I have a problem in bootstrap css about container and fluid
This is my code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="border:3px solid black"><- this div still here</div>
<div class="col-sm-6" style="border:3px solid red">this div full to right -></div>
</div>
</div>
<br/>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="border:3px solid black">text here</div>
<div class="col-sm-6" style="border:3px solid red">text here</div>
</div>
I make it on JSFiddle too, please look it for detail:
JSFiddle
my problem is, how to make my col-sm-6 inside container like col-sm-6 inside container-fluid. Or anyone have other way to fix it?
Maybe this post can help you: override bootstrap container width
The idea is basically that you put negative margin on your div.
Related
I am using Bootstrap v5 and would like to get a grid layout, where one column has position:fixed so that it scrolls with the very long column left to it.
The issue is the following:
Whenever the height of the first row gets too large such that the second row (with the position:fixed column) moves out of the viewport, then also the column ("Some sample content") disappears. For smaller heights, it works as expected.
The example code is:
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div style="position:fixed">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
You can find an example at: https://jsfiddle.net/4cma32k9/1/
Do you have any ideas to resolve it?
Best,
Tom
Use sticky position:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div class="sticky-top">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
</div>
When I try to fix problem in JSFiddle i just add border and i see already your
Some sample Content
text is positioned by viewport whatever you do. In this point your result is what you want with large screen?
<div class="col-md-4" style="border:1px solid green;" >
<div style="position:fixed; border:1px solid gold;">
Some sample content
</div>
</div>
position:fixed similarty position:absolute both abolute and fixed
take the defined element out of the normal flow. Depends on the relatively positioned parent element.
Maybe some bootstrap problem occurs. Try to figure out without bootstrap codes. give Two or more divs and style it. Then try to shape it and reach what you want, if it is not working , I'll write and try it when I'm available.
Please make you sure, all option you try and give me feedback.
<div>
<div style="position:fixed; z-index:9999;">
do something ....
</div>
</div>
So whatever content is in this div, its position is always in front of other content. If you want the content in this div to be behind the content of another div then you can use z-index:-9999
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
I am using bootstrap fluid layout. The layout I desire is as follows:
My html code
<div class="container">
<div class="row-fluid">
<div class="span4 well">span4</div>
<div id="h" class="span8 well ">span8</div>
</div>
<div id='calendar' ></div>
</div>
It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.
The solution I tried
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div class="span4 well ">span4</div>
</div>
<div id='calendar' ></div>
</div>
It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.
How can I do that?
Try adding this style:
#x{
margin-left: 0px;
}
And updating your html to:
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div id="x" class="span4 well">span4</div>
</div>
<div id='calendar' ></div>
</div>
The id is just trumping this portion of the Bootstrap css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>