I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
Related
I was wondering what would be the best practice of using the "col" classes in Bootstrap.
example 1 - I already know this way is valid
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
example 2 - would this be considered a good practice as well?
<div class="row">
<h1 class="col-12"> Heading</h1>
</div>
Thanks for your answers!
The Grid System documentation includes only examples with div elements, and although the CSS styling applied by Bootstrap is not limited by any tag but only by classes (e.g. .col-md-6 instead of div.col-md-6) it is a better approach to nest your content in a div, for at least two reasons:
It will allow you to add other content later to the same column, such as a button or tooltip after the heading
Allows better styling of your h1 tag, and does not apply the automatic gutter of 15px on each side of it, which can make your heading alignment incoherent
Having said that, there may be more complex cases where your second approach would benefit, but in this case it does not seem applicable.
you can use the grid with other elements too as it is classes , but try to follow standards of coding and styling for proper code management and readability.
according to which example 1 is correct way
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
In the Bootstrap 3 documentation they give the following example of using push and pull classes to change column ordering (http://getbootstrap.com/css/#grid-column-ordering):
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I understand how this works but why would you not just write the order in which you want them to appear in your HTML, like this?
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-9"> ... </div>
</div>
I can't see any possible use case for the example they give, because whether the order is col-md-3, col-md-9, or col-md-9, col-md-3 you're still not going to gain any more or less width on any device - they still add up to 12. Therefore why not just define it in the HTML in the correct order?
I understand how the classes work technically. But I don't understand what the use case of them could possibly be since they don't appear to do anything you cannot do already by defining things in the order you want? Essentially you can't gain any more or less viewport width on a given device, so where would you ever want to do something like this?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
why would you not just write the order in which you want them to
appear in your HTML
It's because when we write markup we're supposed to think of its semantics too.
For example you have a page which has a sidebar on the left side, and an article on the right side. In your markup hierarchy the article should comes before the sidebar because the article is the main page content.
But then if you float them left, the article will be on the left side and sidebar will be on the right side, which is the opposite of what you want to achieve. So to fix this you will use push and pull classes, you get the idea.
This is just an example. Of course other options are available to achieve the same result such as float them right, or place the sidebar markup before article but wrap it with <aside> element.
I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.
I have always worked under the Zurb's foundation logic for my grid systems. Now I'm trying bootstrap for first time in it's 3.0.2 version. One thing I don't understand is the structure of it.
While Zurb works like:
<div class="row">
<div class="twelve columns">
</div>
</div>
Bootstrap has a 3-step structure to get the very same result:
<div class="row">
<div class="container">
<div class="col-lg-12">
</div>
</div>
</div>
My question is, what is the "row" class standing for?, on css it only sets a couple of margins and also clear the layout with the pseudo :after element. Can someone please explain me the logic of this? I'm sure that row is there because of a reason, but I can't find it.
.container only exists to give your layout a fixed-width (which is altered based on the end-user [responsive]). This class should also really only exist once on the page, and wrap all .row elements within (therefore living up to it's name--a container).
Bootstrap uses a fixed 12-column layout, and therefore only needs two pieces of information: .row to queue a new row, and one of the col-*-n classes to decipher how many columns that block should take up.
Columns are also broken down by three main layouts: lg, md and sm each having a different effect on the layout based on the window viewport. Bacause of these three variations, it's possible to specify that content should change based on browser capabilities (e.g display three columns on all devides (md & lg), but maybe switch to two on mobile (sm)).
Having said that, the most basic layout consists simply of:
<div class="row">
<div class="col-md-12">
single div consuming all 12 columns
<div>
</div>
I have basic knowledge of TWBS3 and this i how I understand it:
Imagine that your page is a table where, by default, you have 12 columns(this if you haven’t customized the configuration). When you have an element that has a class “col-*-*”, you will only use the space that is defined by the col class. Building on this, if you have 4 elements with col-lg-4 class, you will get 3 elements in line, whereas the fourth will be drawn in a second line. This is because 3 col-lg-4 elements add up to twelve columns, so the fourth element is pushed below the other elements. This might be good in some cases where the elements all have the same height(always), but when the height varies you get odd results where some elements that are of smaller height are drawn a little higher in the page. ROW enforces the idea of having elements that belong to a row. Something like having a 12 column n rows table. Ex:
ELEMENT 1 ELEMENT2 ELEMENT 3
ELEMENT 4
With the same 4 elements of col-lg-4 you could do something like:
<div class=”row>
<div class=”col-lg-4”>Element 1</div><div class=”col-lg-4”>Element 2</div>
</div>
<div class=”row>
<div class=”col-lg-4”>Element 3</div><div class=”col-lg-4”>Element 4</div>
</div>
ELEMENT 1 ELEMENT2
ELEMENT 3 ELEMENT 4
Because you are saying that you have two rows, each with two elements, that span 4 rows, out of the twelve that you have available for the row.
Hope this helps you. Sorry about the bad english.
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.