if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.
Related
My code is given below
<div class="row align-items-center">
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
</div>
CSS look like below
.row {
height: calc(70vh - 60px);
}
When I check-in mobile or small device grid item put some space in upper side and lower side. screenshot attached below
you can see space. I want to make div without space.
How can I?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 200px;background-color: sandybrown;" class="d-flex align-items-center justify-content-center">
<div class="row no-gutters d-flex bg-primary">
<div class="col-12 col-md-6 bg-info">on small 12-cols and medium or above 6-cols</div>
<div class="col-12 col-md-6 bg-warning">on small 12-cols and medium or above 6-cols</div>
</div>
</div>
if you want no padding, no margin only on small screen, you can use media query in scss
#media (max-width: 576px) {
margin: 0px; padding: 0px
}
The following is the structure of my layout in Bootstrap 3.2:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
<div class="col-xs-6">
<!-- I want only this column to be fluid. -->
</div>
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
As you can see in psuedo-code comments, I want only the middle column to be fluid according to the screen size.
Is it possible in container-fluid fashion of Bootstrap? Or I should go through other ways?
There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a few ways
Use flexbox (the best way) - Demo.
.row {
display: flex;
}
.fixed-side-column {
width: 250px;
}
.fluid-middle-column {
flex-grow: 1;
}
Use calc() (or the JavaScript equivalent) keeping in mind browser support - Demo
.row > div {
float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
width:250px;
}
.fluid-middle-column {
width:calc(100% - 500px);
}
Use absolute positioning and padding on the middle element to remove the need for any calculations - Demo
You'd have to change the markup some
<div class="container-fluid">
<div class="row">
<div class="fluid-middle-column">
<!-- I want only this column to be fluid. -->
</div>
<div class="fixed-side-column">
<!-- I want this column to be fixed. -->
</div>
<div class="fixed-side-column right">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
/* CSS */
.fixed-side-column {
width:250px;
float:left;
}
.right {
float:right;
}
.fluid-middle-column {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
padding: 0 250px 0 250px;
}
You'll need to add custom media queries to handle what happens when the screen is getting small.
When using bootstrap 3 and Desandro's Masonry, I'm getting stuck on a weird issue in which it seems that once Masonry is called, an extra 10px is added to the width of my images, causing the masonry to go from a desired 3 columns to 2 (but still working properly in 2). My best guess is that this must have something to do with Bootstrap's new .img-responsive class.
The issue can be seen here: http://jsfiddle.net/68qxE/2/ (just be sure to expand the width of the result), but if you'd prefer:
Here is my HTML:
<div class="container">
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" />
</div>
</div>
Here is my Javascript:
$(document).ready(function(){
var $container = $('.container');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.post-box',
columnWidth : '.post-box',
transitionDuration : 0
});
});
});
And here is my CSS:
.img-thumbnail {
padding: 10px;
}
.post-box {
margin: 15px 0 15px 0;
}
Now when the page is originally loaded, and before any of the javascript takes place, the width of col-lg-4's are 350px. But as soon as the javascript is called, the width of the col-lg-4's jumps up to 360px, which I believe is what's causing this to go from a 3-column layout down to a 2-column layout.
The answer was further discussed and solved here: https://github.com/desandro/masonry/issues/405
I don't think it's caused by imagesLoaded. The issue is that there's a padding on .container.
Why don't you just reset that to 0?
.container {
padding: 0px;
}
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.
I have a site with a right sidebar and a left main content area. Code looks like this:
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
with
.leftside
{
float:left;
width:710px;
}
.rightside
{
margin-left:720px;
}
(see actual site at http://blog.stephenkiers.com/)
Reason it is coded this way is so that because the leftsidecontent is important and I want to be first data accessed by visually impaired visitors; instead of them having to skip all the fluff every time!
The code works in FF, IE8, Safari etc; but in IE7 the rightside divs clear the floated divs.
I would love any suggestions you may have. I have some ideas about how to fix it; but they all involve pretty big rewrites.
thanks!
why don't you try wrapping the content stuff into two columns like this example
The CSS:
.leftside {
float:left;
width:710px;
}
.rightside {
float: left;
margin-left: 20px;
}
.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }
The HTML:
<div class="leftside">
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
</div>
<div class="rightside">
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
</div>
This way the leftside and rightside are just layout elements and are isolated from the content.
Another good tip for visually impaired visitors is to have links at the top of the page to allow users to skip directly to content sections and hide them from your layout with css:
.skipToLinks { position: absolute; top: -100px;}