i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
Related
I'm working on a site that has on the homepage various blocks of information. I've been using Bootstrap for the grid, but when a column is taller than the previous one, it creates an entirely new row, leaving empty space in the columns, like so:
I know I can remove the space by nesting 2 and 4 in the same column div, but it would be far better for the project if the grid system would automatically nest the columns, like so:
Is there a grid system that can do this for me?
Update:
Thanks for the Bootstrap cards link, but what I'm looking for is something that specifically puts the first items up top, so that my users can put the most important blocks first, and have those at the top of the page.
I have created a Bootply to show the issue I am having: http://www.bootply.com/8fPmr31Wd7
Scroll down to look at "People" and "Places" and find they are indented along the sides.
Perhaps I am not using the right classes, or perhaps there is a bug with the grid, but if you use the grid commands within a form, it causes the elements that are within a grid to be just a hair off on each side and not line up properly with the rest of the form.
I know Bootstrap 4 is in testing, but I didn't know if this was a bug or something I am missing so I thought I'd ask. Thank you.
You have grid rows that don't contain any columns for all your other form rows, and you're using columns for the People and Places form element groups.
If you add a 12-unit wide column within your other rows, as per the top answer to Best practice for single column within row in bootstrap v3 grid system?, your horizontal spacing within your grid will be consistent.
I have a question about what would cause the following error in bootstrap 3.
Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.
Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.
Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated
columns / div.
However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.
Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?
I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.
TWBS-2
http://getbootstrap.com/2.3.2/scaffolding.html#global
TWBS-3
http://getbootstrap.com/css/#grid-intro
The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.
Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.
I'm making blog template. In article/post list, i want to create layout like this, i don't know what name this layout, it's like notes in android version of Google Keep
I try to create the layout using simple box div with css float:left but the result is like this, there is a leave blank space when box change line, and the next box start horizontally in new line
So, is anyone knows how to make layout like that without using two column of div? or maybe there is any javascript plugin to solve?
This is a javascript solution, but have you thought of using something like Isotope or Masonry? http://isotope.metafizzy.co/
So, is anyone knows how to make layout like that without using two column of div?
It's a bit of feature abuse, but you can set the outer div to use text columns and then layout the inner divs in 2 columns with display: inline-block.
Column direction flexboxes won't fill the horizontal space automatically even if you allow them break because they only break if they are somehow constrained in that direction and height usually is not constrained in documents.
I've been pondering this ever since I started using Bootstrap 3 - which is a fantastic framework by the way. What I'm describing may be completely the wrong way to go about this or it may be a very common issue and I'm interested to see how other developers & designers handle this.
The image below contains a simple row (white box) in a container. The row has a col span of 10 with an offset of 1 and the blue box is then inside a nested row of the white box. When the designer does this they will simply be keeping everything matching up to the nice full width container grid (because they won't understand or need to know how nested rows work).
However, the reality in Bootstrap 3 is the 12 grid starts again inside the nested row. The result of this means I can no longer line up the blue box nicely as it doesn't fit the nested grid.
So my question is: how do others handle this? Am I actually using nested rows in a way I shouldn't be or is this something that the designer needs to be educated on? Or is there something much easier that I'm now aware of :)
Thoughts?
After doing some more investigation I have just realised that I don't think this is an issue at all. What my example above is ignoring is that the gutter remains the same width in nested rows as in the outer rows. When I did in above images (and with how I always thought about it) I simply resized the grid in Photoshop which also resized the gutters - which is incorrect.
I've tried now using this cool tool http://gridpak.com/, created the grid to the same width as my nested row and, lo and behold, it lined up perfectly.
The columns in the nested rows will be different still but the result will match up with the original design. In the example above, the blue box will actually be a col span of 8 with an offset of 2. The designer will look at the site and "think" it is actually a col span of 6 but we will all know better.
Thanks for the ideas and suggestions everyone - especially to royalsflush for the neat jQuery tool he developed as that might still come in handy.
Indeed, the 12 grid system may cause difficulties in some cases when you have fixed directives from your designer, but there are all kind of tricks that you can do in order to succeed.
So if you want to align the blue block to be on center and a width of 6 cols, you can just use col-lg-offset-3 col-lg-6 classes and don't use it inside that white block, or if you use it inside that white block you can set this classes col-lg-offset-2 col-lg-8 and change the left and the right padding from 15px to 45pxlike you can see in this example (code here).
As you can see, everything is possible in bootstrap, you just have to change the left and right padding and you can create any type of layout you need.
I guess, it's because you did this whole thing in a <div class="container"> so the grid went according to this block. Just remove the <div class="container"> and the inner blocks will snap to the 'main' grid. Play a little with classes and offsets and it will look like in the first picture.
I found a couple of variations of your question, mainly because I had the same problem a while ago - maybe one of the answers to those can help you out:
Bootstrap 3 nested grid not reset to 12
Prevent bootstrap 3 from resetting nested grids / use master grid