I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"
Related
We have a column (the first of four), whose text may exceed the available column width. In that case we'd like to "send" that column into a new line below the other three elements (which remain in the first row).
Example:
If the first column with verylongtext would result in a line break,
<div class="row">
<div class="col">verylongtext</div>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
then it should become something equivalent to
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">verylongtext</div>
</div>
Is there any way to achieve this behaviour with bootstrap or other techniques?
if you want to keep fixed col width then use it like col-4instead of col. It will take care of large text , large text will go down long.
You can achieve this using jquery the thing you need to do is to define the number of characters of what you are considering as "very long text", for instance, lets say that we defined it to 12.
Here it a snippet:
var longTextLength = 12;
$(document).ready(function(){
$("div.col").each(function(){
//We look for every class called col
if($(this).text().length >= longTextLength)
{
//If it's a very long text then we do logic
//We look for the class parent
var customDiv = $("<div/>");
customDiv.addClass("row");
customDiv.html($(this).get(0).outerHTML);
customDiv.insertAfter($(this).parent());
$(this).remove()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col">verylongtext</div>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
I would do this using the grid-model: experiment with the various display sizes and see where the text breaks. Then hide it in that screensize using responsive utilities and make alternate rendering visible for that and smaller sizes.
<div class="row">
<div class="col d-none d-md-block">verylongtext</div>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col d-md-none">verylongtext</div>
</div>
There's a fiddle to see a working sample.
Another solution might be to use JS to detect the certical size of that first col and see if it use more than line-height...and if so, move it. But I think the first approach is far better (does not rely on JS, no screen-changes etc.)
For some reason, bootstrap is only allowing me to use the "col-sm" class. If I enter anything else into my code, including the "xs" class, the columns are stacked on top of one another. This is my code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<div class="well">something here</div>
</div>
<div class="col-xs-3">
<div class="well">something here</div>
</div>
</div>
</div>
I have ensured that the appropriate CSS, JS, and jQuery files are linked (hence why the "col-sm" class works), and only have my own personal CSS style-sheet linked in addition to them (which does not predefine any width or height for any element). Furthermore, I am viewing my work on the latest version of Mozilla Firefox.
Edit: I have closed the div with the class "fluid-container", it still produces the same problem. That is, instead of the two columns appearing on the same row, the two columns are stacked on top of one another. For some reason, the only class that works is "col-sm"--any other class, including the "xs", just lines the columns atop of one another.
Your code is correct only the thing u missed out is the last '>' closing of div tag.
replace:
<div class="container-fluid"
with:
<div class="container-fluid">
Please fix your div first <div class="container-fluid" missing >
See below corrected format
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<div class="well">something here</div>
</div>
<div class="col-xs-3">
<div class="well">something here</div>
</div>
</div>
</div>
Use the latest stable version 3.7.7 of bootstrap and this problem will be solved. You can download it from here. If you don't want to use the newest version, you can try to use col-sm-9 instead of col-xs-9 and col-sm-3 instead of col-xs-3, it will also solve the problem.
I want to know if there is any problem if we do the following using bootstrap 3 with the html structure?
After reading the documentation and some examples all of them recommend doing the following structure
<div class="row">
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
</div>
but we are using angular in our application and the sizes of each panel could change and also each panel have it's own controller that knows when to expand or not. I already thought about a controller or an state manager but i don't know at the moment the final ui definitions.
So my question is is any problem with the following structure?
<div class="row">
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
</div>
That structure is fine. However there is a mistake in your class names. It should be 'col-lg-4'.
It may also pay to use some other col-- classes to handle what happens on smaller devices/screen sizes
EDIT:
After re-reading the question I see that they won't have fixed sizes. Perhaps consider implementing a function to assign different sizes to different elements.
E.G.
<div class="row">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
Now you can reference the divs with the different id's and do something like this:
//if you want a large middle column with two smaller columns on the side
$('#one).addClass('col-lg-2');
$('#two').addClass('col-lg-8');
$('#three).addClass('col-lg-2');
note: I'm using jquery for that.
The grid class should be col-lg-4 instead of col-lg 4.
http://getbootstrap.com/examples/grid/
it seems to be simple , our designer made the a design of 3 different forms in one like page
as you may see in this snippet
I don't think we can do this design with valid html in twitter bootstrap grids ?
where you would get the form opening and closing tags and keep it valid
<div class="container">
<div class="col-md-4">
<div class="row"><div class="form1">form1</div></div>
<div class="row"><div class="form2">form2</div></div>
<div class="row"><div class="form3">form3 </div></div>
</div>
<div class="col-md-4">
<div class="row"><div class="form3">continue of form3 </div></div>
</div>
<div class="col-md-4">
<div class="row">
<div class="form3">
continue of form3
</div>
</div>
</div>
</div><!-- /.container -->
You cannot split a form element so that one part is inside one element and another part is inside another element. HTML syntax prevents that.
You can, however, have input elements and other controls outside a form element and associate them functionally with it using form attributes. Browser support is still too limited to make this a feasible option in normal situations.
I'm trying to create a site using bootstrap and no external css. It seems I can achieve many of my formatting goals using nested grid systems.
e.x.
<div class="container-fluid bs-docs-grid">
<div class="row show-grid">
<div class="col-md-6">
<div class="row show-grid">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
Is this a reasonable practice?
Your code for the nesting is exactly what Bootstrap recommends: http://getbootstrap.com/css/#grid-nesting
and
https://getbootstrap.com/docs/4.4/layout/grid/#nesting (for Bootstrap 4)
Unless you have a specific need for the show-grid and bs-docs-grid classes, there's no need to include them. They aren't part of the base bootstrap CSS.
If you can achieve the layout you need using nested grids, I would certainly use them. They will save you time and reduce potential browser compatibility issues.
Good luck!