one:
<div class="row">
<div class="col-md-12">
<div class="row">
.
.
</div>
</div>
</div>
two:
<div class="row">
<div class="col-md-12 row">
.
.
</div>
</div>
Is both the implementations are same?can i use the 2 method so that i can reduced the mark-up.
According to Bootstrap's own API documentation, when nesting columns any columns .col should be nested within a .row. The two should not be combined on a single element.
Aside from the fact this makes more sense semantically- the underlying CSS properties both classes affect are reliant on this structure.
Also note, when using col-md-12 in isolation, you are effectively creating a full width element (which a row is anyway). In which case using the grid layout may not be relevant unless you have other elements showing/coming into play at different screen sizes.
Right (if using other columns as well as col-md-12):
<div class="row">
<div class="col-md-12">
<div class="row">
.
.
</div>
</div>
</div>
Wrong:
<div class="row">
<div class="col-md-12 row">
.
.
</div>
</div>
If you just want a full width element, you dont need to use the grid layout and/or can remove one level of nesting.
1.If you need multiple .col- in a row then you may write as following..
<div class="row">
<div class="col-md-6">
.
.
.
</div>
<div class="col-md-6">
.
.
.
</div>
</div>
2. if you need to divide `.col-` in more `.col` then
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
.
.
.
</div>
<div class="col-md-6">
.
.
.
</div>
</div>
</div>
<div class="col-md-6">
.
.
</div>
</div>
Related
I'm changing a database using phpmyadmin with several html pages inside it and I would like to remove, from all these pages, all the <div> and other tags that contain a certain class or id.
Example:
Case 1
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
Case 2
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
i would like to remove all <div> that contain the class="undesirable". In some cases, there is still the possibility of appearing as class="pre_undesirable", or something similar.
Initially I thought of using regex, but as there are variations in htmls, code breaks are occurring, as there is no way to know when the <\div> will end.
Possibly the answer would be HTML parser, but I can't understand how to use it. Any indication of where to start?
Since you are dealing with html, you probably should use an html parser and search for the removal target using xpath. To demonstrate, I'll change your html a bit:
$original=
'<html><body>
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="pre_undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
</body>
</html>
';
$HTMLDoc = new DOMDocument();
$HTMLDoc->loadHTML($original);
$xpath = new DOMXPath($HTMLDoc);
$targets = $xpath->query('//div[contains(#class,"undesirable")]');
foreach($targets as $target){
$target->parentNode->removeChild($target);
}
echo $HTMLDoc->saveHTML();
The output should include only the two "keep me" <div>s.
We can make use D3JS to remove or append any the HTML elements by class name or id.
We can make use of Select() and Selectall() for the selection of the particular elements in the HTML. Incase if we want to append any div tag use append('div') to insert the div for the data.
<script>
function remove()
{
d3.select(.undesirable)
.selectAll("li")
.exit()
.remove()
}
</script>
So basically I'm still a begginer when it comes to doing interfaces on the web and trying to allign everything properly. I've decided to use the bootstrap library. I'm trying to make a modal dialog divided into multiple section but i'm really struggling to make some section stack on top of each other and have another section take up the entire space.
What I currently have :
https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png
What I'm trying to achieve :
https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png
This is the code I currently have with some sample text to try to delimiter each section :
<div class='container-fluid'>
<div class="row">
<div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
STATUS
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
L
</div>
<div class="col-md-3">
SOME TEXT ASDASDASDJLASDJKLASDJAD
ASDASDLASKD
aASDASDK:ASDKASDK
ASDASJDASDASDKASJDASDJ
</div>
<div class="col-md-9">
L
</div>
</div>
</div>
To match the image you've provided, you want two columns - one three wide with four rows, and one nine wide with one row.
The height of the rows in the left column will be determined by their contents. I've written an example with extra content in one row in the left column:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
3
</div>
<div class="row">
3<br>
wide<br>
but<br>
taller
</div>
<div class="row">
3
</div>
<div class="row">
3
</div>
</div>
<div class="col-sm-9">
9
</div>
</div>
</div>
JSFiddle for a live example.
You keep two main columns (3/9) and inside the first column you can add more container. You can also add styles or classes to them.
<div class="container-fluid">
<div class="row" >
<div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
<div style="min-height:10vh">10vh</div>
<div style="min-height:20vh">10vh</div>
<div style="min-height:10vh">10vh</div>
<div style="min-height:10vh">10vh</div>
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
</div>
</div>
Is it a good idea to use ID in a bootstrap .col which is in a .row? I read somewhere that you should only have columns under .row . Example:
<div class="container">
<div class="row">
<div id="style1" class="col-12">
</div>
<div id="style2" class="col-12">
</div>
</div>
</div>
or should I make seperate div tags:
<div class="container">
<div class="row">
<div class="col-12">
<div id="style1">
</div>
</div>
<div class="col-12">
<div id="style2">
</div>
</div>
</div>
</div>
It doesn't really matter: The reason why you shouldn't you use an ID for a particular element usually is that you would like to use the CSS applied to that ID more than once: In this case you should use a class instead of an ID.
But if you are sure you will use those settings only once (or if you don't use any CSS for that ID but only want to be able to address that one element via Javascript/jQuery), you can use an ID.
If I have two column in desktop, can I convert this two column into four column in tablet view.
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
if it is not possible with bootstrap, Is it possible with Tables?
change your div class to "col-xs-3" and allocate a width and height.
JSFiddle here
Full code:
HTML
<div class="row">
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
</div>
CSS
div {border: 2px black solid; width:100%;}
Have a look at a technique called 'Scaffolding'
Boostrap 3 also offers a whole new range of features for the grid system and media queries, check out this blog post
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
I am having an issue with a dynamic form I am creating on my page.
I have a Row that contains 1 or more Divs that are 4 col in length. I would expect that after ever 3, it moves the next one down as it hits the 12 col limit.
Looking at the picture below, after we hit the first three fields I would think it would move the others down to their own row.
Here id the HMLT that my data is in. As you can see, each one is its own col within the row.
Is there something I am doing incorrectly with the way I have this formatted? Just not sure what else to try.
I believe it is proper to create a .row for every row on the page:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I had the same problem yesterday, what I found is that the container should have the col length specified in order to fix the problem.
Also I found useful to add additional divs in order to fix better the length of the fields.
My example:
<div class="form-group col-md-12">
<div class="row">
<div class="form-group col-md-3">
your label data
</div>
<div class="form-group col-md-4">
your input data
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
your label data
</div>
<div class="form-group col-md-3">
your input data
</div>
</div>
</div>
I hope it helps.
It's hard to tell from your screenshot, but it looks like you have the whole thing (rows, columns, and some form groups) inside of a span element. Try using a div instead.
The problem: http://jsfiddle.net/24doudo0/
This seems to be an issue with how bootstrap handles grid wrapping. It doesn't handle as nicely as we would like. I can think of two solutions to this problem. The first is to insert rows after every third column when you loop over them in the backend. For that you can use the modulus operator. I don't know what backend language you are using, but I'll illustrate this approach using PHP because I'm lazy.
Lets assume you have an array of input names that you want to loop over and create columns for each.
<div class="row">
<? foreach ($inputs as $count => $name) : ?>
<div class="col-md-4">
<input type="text" name="<?=$name?>">
</div>
<? if (($count + 1) % 3 == 0) : // $count is 0 based. We need an index that starts at 1 so that we don't trigger a new row on the first loop (0 / 3 = 0 which is a remainder of 0) ?>
</div>
<div class="row">
<? endif; ?>
<? endforeach; ?>
</div>
The other solutions is a CSS based one. Pretty simple but is CSS3 only, so it won't work in IE 8 or less. This approach just clears the float after every third column. Demo here: http://jsfiddle.net/j0dtng4t/
[class*="col-"] {
background: #C55;
border: 1px solid white;
color: white;
}
[class*="col-"]:nth-of-type(3n + 1) {
clear:left;
}
Actually there are at least other 2 alternative solutions you can consider without adding row divs.
The first is adding heights to all the .col* elements , in this way they'll get ordered progressively and stack when they don't fit next to each other.(checkout the pen).
The second is using display flex on the div containing the .col* elements; it's not a bootstrap feature but it seems to suite your situation quite well.
In the pens I made I modified the col-* selectors but I suggest you use a new selector so not to mess with Bootstrap's grid style.
There seems to be some confusion on how floats work especially in a bootstrap grid.
Here is a simple bit of code that demonstrates how floats work
.container-fluid {min-width:638px;}
.container-fluid p{margin:0;font-size:1.2rem}
[class*="col-"] {
background: #C55;
border: 1px solid white;
color: white;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
column 1 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 2 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 3 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 1
</div>
<div class="col-xs-4">
column 2 <p>I'm tall, but my buddies aren't</p>
</div>
<div class="col-xs-4">
column 3
</div>
<div class="col-xs-4">
column 3
</div>
<div class="col-xs-4">
column 1
</div>
<div class="col-xs-6">
column 2 <p>I'm tall but because Fred is too wide he goes to the far left to fit</p>
</div>
<div class="col-xs-2">
column 3
</div>
<div class="col-xs-4">
Fred column 1
</div>
</div>
<div class="row">
<div class="col-xs-4">
inputs are taller than select
</div>
<div class="col-xs-4">
inputs are taller than select
</div>
<div class="col-xs-4">
selects are smaller
</div>
<div class="col-xs-4">
<input type="text" placeholder="i'm too tall" />
</div>
<div class="col-xs-4">
<input type="text" placeholder="i'm too tall" />
</div>
<div class="col-xs-4">
<select><option>i'm shorter</option></select>
</div>
<div class="col-xs-4">that's why i'm column 3</div>
</div>
</div>