Bootstrap grid system row content overlapping other row - html

I've a problem with grid system of bootstrap, I've 6 elements inside a row, each one with class set to "col-md-2", the problem is that the only first 5 elements are shown on the row, and the 6º jumps to 2nd row. So the 2nd row gets empty spaces.
See the picture.
a piece of code:
<div id="card-listing" class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-2 cardthumnb" data-time="1396739650" data-name="Graceful Charity">
<a id="card-55" href="http://127.0.0.1/~victor/yugiohguia/cards/graceful-charity/">
<div class="card-thunmb">
<img src="http://127.0.0.1/~victor/yugiohguia/wp-content/uploads/2014/04/GracefulCharity-LCYW-EN-ScR-1E.png" />
</div>
<div class="card-title">
<span>Graceful Charity</span>
</div>
</a>
</div>
<!-- other 5 images... -->
</div>
</div>
the only css applied is:
.cardthumnb img {
max-width: 100%;
white-space: normal;
}
.cardthumnb .card-title {
text-align: center;
}
see live

This is not about bootstrap, but your isotope settings.
Make sure you have your configuration object setup correctly, or make a question targeting isotope.

Related

Nebular responsive layout

I'm having trouble leaving my responsive layout with nebular, it would be the first time I'm using ...
Settings is default using bootstrap and Angular,
body of the layout would be:
<nb-layout>
<nb-layout-header>
responsive nav left side a logo with welcome writing right side a logo.
"I managed to make the less responsive"
</nb-layout-header>
<nb-layout-column>
here would be all the rest of the layout,
Big problem would be here I am not able to make the correct divisions like row and col,
It's not getting responsive.
</nb-layout-column>
</nb-layout>
here is my code:
.clienteLogo {
margin-left: 1%;
}
.testeLogo {
margin-left: auto;
margin-right: 1%;
}
.boasVindas {
padding-left: 20px;
}
<nb-layout>
<nb-layout-header>
<img class="clienteLogo" src="../assets/clientlogo.svg">
<span class="boasVindas">Olá Cliente, seja bem vinda.</span>
<img class="testeLogo" src="../assets/teste.svg">
</nb-layout-header>
<nb-layout-column>
<div class="row">
<div class="col-md-3 col-lg-3 col-xxxl-3">
<a id="reports">
<img class="reportsimg1 " src="../assets/shortcuts-daily.svg">
</a>
</div>
<div class="col-md-3 col-lg-3 col-xxxl-3">
<img class="reportsimg1" src="../assets/shortcuts-teste.svg">
</div>
<div class="col-md-3 col-lg-3 col-xxxl-3">
<img class="reportsimg1" src="../assets/shortcuts-report.svg">
</div>
<div class="col-md-3 col-lg-3 col-xxxl-3">
<img class="reportsimg1" src="../assets/shortcuts-inteligencia.svg">
</div>
</div>
</nb-layout-column>
</nb-layout>
I tried to put card inside the column but also could not:
same line
1 picture | 2 picture | 3 picture | 4 picture
responsive
themes is default
What I understand from the last line is that you are trying to display all pictures in one row. I am not sure if bootstrap library is loaded or not but the following will display it all in one row:
.row {
display: flex;
flex-direction: column:
}
NbLayoutColumnComponent
A container component which determines a content position inside of
the layout. The layout could contain unlimited columns (not including
the sidebars).
From the above description, it means it won't have any affect on the style of your <div class="row"> but the position.
Regarding the NbCard, the card has header, body and footer with white background and bordered shadow same like bootstrap cards and it does not impact the style of your div elements.
Make sure the bootstrap library is loaded
Inspect the <div class="row"> and see if the bootstrap styles are applied or is there any other styles override it.
For responsiveness: use bootstrap columns.
https://akveo.github.io/nebular/docs/components/layout/overview#nblayoutcomponent

Why is the padding between the bootstrap columns getting lost

I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr

Twitter Bootstrap/Unify center variable amount of images

I want to create a call-to-action box with centered content
The box is contains two rows
the first row has the title and the second a variable amount of images, with a maximum of 12 (if greater than, then it will be three or more rows).
The text get perfectly centered using .text-center.
However i cannot create a div with the width of the content.
What i have now:
<div class="container">
<div class="row">
<div class="col-md-12" style=" padding: 10px 0 0;">
<div class="row text-center">
<div class="col-md-12 animated fadeInLeft">
<span class="color-green">Title</span>
</div>
</div>
<div class="row text-center">
<div class="col-md-9 center-block">
<!-- Content / Images-->
</div>
</div>
</div>
</div>
</div>
I tried multiple setups but the center-block doesn't seem to place the col-md-9 in the middle. (even though it does apply margin: 0 auto;)
What can i do to create equal width images in the center of their container, with variable amount. I'm using Unify Template which is based on Twitter Bootstrap 3
Since text-center affects on inline-level elements(children) only, you need to make them inline. It's clear. So all you need is to make <div class="col-md-9 center-block"> inline. Do it:
.center-block {
display: inline-block;
float: none;
}
If you want to push not more than 12 images in one line without javascript, I think there's the only way:
.center-block img {
width: 8.2%;
}

col-lg-8 not using 8/12ths of the screen?

Hi all I'm using this bit of code
<section id="post1">
<div class="container-fluid post-1">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-8 oblongbig">
</div>
<div class="col-lg-4">
<div class="row">
<div class="=col-lg-6 oblong">
</div>
</div>
<div class="row">
<div class="col-lg-6 oblong">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to create three boxes, have a look at http://deliciousproductions.com.au
My problem is that the first and larger box is fine but the second two boxes should start after the first col-lg-8, but they just start right up against the large box, as though there's no padding/margin. I added a 10px margin so it's easier to understand. So the col-lg-8 isn't making it's width 8/12's of the screen?
The 2 boxes in rows also aren't responsive, they are but when you make the page smaller this happens: https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243
and then finally: gyazo[.]com/c57374233a4e0f14fc4f757841893cc5
What would you recommend to make it so when the page resizes the 2 smaller boxes resize so they fit next to each horizontally under the larger box. This is for a blog style site btw.
cheers, Nik
here's the css for each box too
.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
.oblongbig:hover, .oblong:hover {
background-color: #121212;
}
.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
similar to this: demo
There is some problem with your grid code. Use this one
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<div style="height:330px;background:#000;"></div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;margin-bottom:30px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Also don't apply styles directly on grid column. Place content div inside grid column and apply whichever styles you want on that div.
Check out this URL for better understanding of Bootstrap grid system - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
To count a column you need to consider the value of the intervals between them.
Here you can see a visual explanation
There are a couple of issues going on in your code. For Bootstrap columns to work properly, you can't have a column div inside another column div without starting a row. For example, you must format it like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div><!-- .row -->
</div>
<div class="col-lg-4"></div>
</div><!-- .row -->
</div>
In your example you have two nested columns with no row in between. This will mess up your column padding & margins.
Refer to the docs: http://getbootstrap.com/css/#grid-nesting
Next, you're applying your own classes (.oblong, .oblongbig) with set float, fixed width, and margin to the Bootstrap column div. These are overriding the Bootstrap styles and preventing your columns from working properly.
The best idea is to use elements with Bootstrap classes to build your layout, then put elements inside these layout elements with your own custom classes. For example:
<div class="col-lg-6">
<div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>
Avoid overriding the framework's styles, as this results in confusing code. Once you reformat your code so that columns are correctly nested and you're not overriding the Bootstrap classes with your own custom widths, it should come together how you want.

bootstrap basic grid

In an attempt to learn responsive web design, I am teaching myself how to design with bootstrap. I have created a basic grid; the code for the grid is shown below.
HTML:
<div class="row">
<div class="span6 red01">span6</div>
<div class="span6 green01">span6</div>
</div>
CSS:
body { padding: 0px; }
.red01 { background: #ff0000; }
.green01 { background: #00ff00; }
I can see the two divs on my web page, but my problem is with how they are aligned. I'd like to align them horizontally across my laptop's screen. I've tried fiddling with this, but can't get it to work. Could anyone please lend their expertise?
Please check this JSfiddle for you
See the result here Result of 2 col
<div class="container">
<div class="row">
<div class="span12">
<h1>Bootstrap 12 col spanning full page</h1>
</div>
<div class="span6">
<p> Paragraph test col1</p>
</div>
<div class="span6">
<p> Paragraph test col2.</p>
</div>
</div>
</div>
.container class -> Its a wrapper with fixed width , predefined in bootstrap.css .
.container-fluid -> which is fluid wrapper
.row --> This class is built to contain a row of columns. Each new row creates a new zone for laying out columns as desired.