I am using bootstrap responsive grid system only as I need only that from whole framework.
I understand that I should use grid system only for layout of the page.
But for example I have one div that should contain image on the left and some text on the right side.
I can put bootstrap grid inside that div to get desired layout as that is just two columns.
Is this how bootstrap grid should be used or this is bad practice and I shouldn't use grid inside smaller elements?
It is fine as long as you place grid elements in the right order of hierarchy:
container[-fluid] > row > col-??-## > row > col-??-## and so on.
Remember to NEVER nest a container inside another container. You should not place a container immediately followed by a col element.
All in all, it's ok to give layout to the inner part of your div regardless of its size.
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
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 :)
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
I've been playing with bootstrap 3 and I noticed that if you use the Grid System without a container it becomes fluid, someone told me I shouldn't do that because the system was design to be within a container. What happens if I don't use the container class?, do I need it?, if so could I make the container class width 100% without messing up bootstrap's media-queries, or is there any other or better way to build a fluid layout with bootstrap 3.
Update Bootstrap 4
Outermost rows should also be wrapping in container or container-fluid in Bootstrap 4 to prevent horizontal scolling caused by negative margins on the .row.
Bootstrap 3
You should wrap row in container or you'll have a problem with the negative margins that BS 3 uses for the row element. Basically the row is designed to be within a container. Read more on the Bootstrap grid
Play with this example on Bootply: http://bootply.com/83751
According to the latest documentation:
https://getbootstrap.com/docs/5.1/layout/gutters/#no-gutters
it is reasonable to drop the outer container (or at least its css class assignment):
Need an edge-to-edge design? Drop the parent .container or
.container-fluid.
This appears to have been in the documentation since the 4.0 release: https://getbootstrap.com/docs/4.0/layout/grid/
I think you need it.
Without the container it kind a works - but it shows a horizontal scroll bar at the bottom of the page and around 20px are cut off from rightside of the screen.
See yourself how it works without the container class - just go to http://getbootstrap.com/ and remove the container class using inspect element.
Just use the container-fluid class instead of the container class.
class="container-fluid" will allow you to use full width.
I am working on a page with some dynamic content. The main layout is in 3 containers within the same fluid row. I want the first container either to display one of two types of lists, or be absent -- varying by the state of the page.
However when I try to remove the element with a jquery function like $("#container-id").hide(), it slides the containers to the right of it left, skewing the layout of the page. Is there a way to remove this container from view without the other containers shifting left?
Here is an example of what is happening:
http://jsfiddle.net/PHaeA/27/
And here is an example of how I want the containers to appear when the first one is absent: http://jsfiddle.net/gLTyF/5/
Thanks!
Sounds like the easiest workaround would be to (if possible) add a div inside the span with the content and hide that instead of the whole column.
Another way might be to override the twitter bootstrap style to make it float right instead of left:
.row-fluid [class*="span"] {
float: right; }
but I'd guess that would be more likely to cause unintended consequences.
If you want the space preserved, you can use
$('#col1').css({visibility:"hidden"});