I am using bootstrap to put 2 elements on the same row. However, I am having difficulties getting it to work. Here is what I am inputting:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>$</div>
<div class="refundNumber">12345</div>
</div>
</div>
</div>
And it outputs:
$
12345
I want it to be:
$12345
I cant simply put the "$" with the numbers because I will be using JS to count up the numbers from zero on a specific event. It doesn't work with the "$" present.
Thank you in advance for helping a beginner!
<div>s are block-level elements that start on new lines. If you want them to be on the same line, you have to make them inline-block or inline elements.
Edit: Using <span> would be the appropriate solution in your case:
Change:
<div>$</div>
<div class="refundNumber">12345</div>
To:
<span>$</span>
<span class="refundNumber">12345</span>
Like "Dov Benyomin" answered, except apply ascii character to ensure compatibility.
<div class="col-xs-12">
<span>$</span>
<span class="refundNumber">12345</span>
</div>
There are multiple ways to do this :
.text{display:inline-block;}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Use span tags -->
<div class="row">
<div class="col-xs-12">
<span>$</span>
<span class="refundNumber text">12345</span>
</div>
</div>
<span>OR</span>
<!--Best method use display:inline -->
<div class="row">
<div class="col-xs-12">
<div class="text">$</div>
<div class="refundNumber text">12345</div>
</div>
</div>
<span>OR</span>
<!-- Using col classes of bootstrap -->
<div class="row">
<div class="col-xs-12">
<div class="col-xs-1">$</div>
<div class="refundNumber">12345</div>
</div>
</div>
Like Micheal pointed out, use ASCII codes. ("& #36;" for "$")
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>
I started to use BEM methodology and i have a question according to this.
Example:
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container-title">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container-title">block3</h1>
</div>
</div>
How you can see i use: container__title element in block 2 and in block3. I need this to add different margin and padding for h1.
Question: Can i use the same element in container__block-2 and container__block-3 according to BEM methodology?
It is okay to use the same element for another block as long as you want to have the same properties of the above blocks.
However, incase you need a variation, that's when the modifier comes into role.
whenever you need to make a change in only a particular element from a group of elements, you use a modifier there. It is denoted as block__element--modifier.
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--modifier1 ">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--modifier2">block3</h1>
</div>
</div>
For different variants of same class, u can use --
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--1">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--2">block3</h1>
</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.
I have looked over Bootstrap's documentation on the matter and tried different variations of their stuff, like using container instead of container-fluid, but I have not yet had success. I am simply trying to make two rows of text. The following displays on a single row, and I cannot figure out why. It appears like it should display two different rows, but this is not the case.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Rows</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2"/>
<div class="col-md-2"><p>Apple1</p></div>
<div class="col-md-2"><p>Apple2</p></div>
<div class="col-md-2"><p>Apple3</p></div>
</div>
<div class="row">
<div class="col-md-offset-2"/>
<div class="col-md-2"><p>Apple4</p></div>
<div class="col-md-2"><p>Apple5</p></div>
<div class="col-md-2"><p>Apple6</p></div>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
My wanted output is something along these lines:
Apple1 Apple2 Apple3
Apple4 Apple5 Apple6
Does anyone know why this is all staying in a single row?
I believe this is what you're after:
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2"><p>Apple1</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple2</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple3</p></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2"><p>Apple4</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple5</p></div>
<div class="col-md-1"></div>
<div class="col-md-2"><p>Apple6</p></div>
<div class="col-md-2"></div>
</div>
</div>
bootply example
The offset should be used together with a grid class, like class="col-md-2 col-md-offset-2". Having an empty div with just an offset, like <div class="col-md-offset-2"></div> doesn't make much sense as it renders with no effect on the layout.
because you cannot end a div with / in the start tag, you have to end it with </div>
these are not ended <div class="col-md-offset-2"/> at the point you are expecting them to, but instead where the browser decides that they have to be to keep the DOM from breaking...
see fiddle : http://jsfiddle.net/DrCord/8sq9cb7s/
The following is my HTML:
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
My css is the following (along with bootstrap):
.profile-picture
{
max-width: 200px;
max-height: 200px;
}
.center
{
margin: 0 auto;
float: none;
}
This produces the following output:
The way I want it to display is as shown below:
How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?
The problem is you're removing the necessary float on the columns (by setting float:none to .center). Remove that .center class altogether, it's not needed. You are also missing row divs...
Note, I added a row around the the h2 tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)
Also, you shouldn't have two <h3> tags one after another like that. Use <p> instead of the second h3 - or better yet, just use one <h3> tag and use <br /> to break the one h3 into two lines (see below).
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
</div>
<div class="row">
<div class="col-md-6">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6">
<h3>Profile name: N/A <br />
Status: Waiting for user input</h3>
</div>
</div>
</div>
Never apply any styles or classes to elements with grid classes, if you're not really know what you are doing. Use a nested div instead if you need to change something:
<div class=container">
<h2 class="text-center">Enter your name below</h2>
<div class ="row">
<div class="col-md-6">
<div class ="center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
</div>
<div class="col-md-6">
<div class ="center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
</div>
With Bootstrap, you have to include a div with an class of row, so something like this:
<div class="row">
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
See Bootstrap's documentation on their grid system.