Is that possible to wrap div inside a row? I know it's possible but I just want to know it's a bad practice or not. I'm not using any col-md classes inside row.
Please see the example below..
<div class="row">
<div class="home-bg">
1
</div>
</div>
It's a bad practice because .row is only meant to contain grid col* as specifically stated in the Bootstrap docs...
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins.. In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows.
http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
Your question is the same as asking can I have a div wrapping another div? The class row is just a bootstrap class with some css rules. Nothing more nothing less.
You will need to do this so many times. You will mix divs with classes from different libraries, with custom classes that you will have created and with so many different types of elements.
There isn't a question of good practice or bad practice. If you need some bootstrap functionality that already exists from a class, it's a good practice to use the existing functionality. If not then do whatever you want.
You can do this, but the question is why do you want to? All the row class does is add negative margins and the necessary flex properties to allow the column grid to work, seeing as you don't need the column grid, do you need the negative margins? If not then don't add the rowclass. Having a non-column grid class as the child of row isn't going to break your site, but it's important to bare in mind it may cause some undesired design bugs due to the negative margins it adds.
You can learn more about the Bootstrap column grids here.
Related
I want to seperate my divs into something like the image below using flexbox but i'm not sure how to do it. Do I need to use absolute positions for it or does flexbox have a way to approach it without too much issue?
What you have described is definitely possible. I have provided a rough outline of how it can be achieved below. This link should fill in the blanks for you. Essentially you need a container which has the display: flex and flex-direction: row attributes. Then the children inside the container will need the flex-direction and flex-grow attributes set appropriately.
You should also check this site to see if flexbox is supported by the browsers you are targeting.
edit You will also have to set the order property if you want to reorder the HTML elements - thanks to #BugsArePeopleToo who brought this up in a comment.
If you use flexbox for this layout, you'll need a few extra wrapper divs: one to contain all five divs, one to contain divs 1 & 4, and one to contain divs 2 & 5. It may also be worth it to try CSS grid, which is built for this kind of thing without wrapper divs.
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 in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
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.
im having an issue with a layout i'm currently styling in CSS with the help of the 960GS framework.
The page is 960px wide, as required by this framework, so that's not the real issue..
I cannot seem to place an odd number of elements (ex: ) in the area specified to be the footer.
There is a wrapper div for the "footer", which is styled accordingly to various examples on how to use the 960.gs framework with custom layouts. I'm using the container_12 class on that wrapper div, which means I should have 12 columns to work with, but, I have an odd number of elements in my footer (as I've said earlier), and that means that I can't really divide the elements by the number of columns available, besides, some of those divs take exactly what is defined on the 960.gs classes in terms of width, although I can "hack" some of the positioning, I can't really make those elements even-spaced :(
Should I use other container classes (16 or 24) in conjunction with the other container_12 classes used before ?
Thanks in advance,
Have you looked at using suffix and prefix that is used with the 960GS framework? more info
if that dont work then it would probaly be best to use the 16 or 24 grid, but you can't mixed them together. e.g if you pick 16 all the grids have to be styled to the 16 grid
There's also the option of creating specific divs for whatever elements you'd like in your footer. You could then simply put these into a large footer div and then put each of the individual element divs into 12 columns, positioned as inline-block and aligned to center.
This would allow you a good range of flexibility in the number of content sections you have in your footer, without the worry and trouble of placing things into otherwise limiting columns.