I need to increase following telephone number font size.
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.30AM - 5.00PM. Sunday CLOSED</span></p>
<p class="pull-right"><i class="fa fa-phone"></i>Tel No. (+77) 853 740 966</p>
</div>
</div>
</div>
</div>
Wrap it in span and add css to it:
.text-large {
font-size: 150%;
}
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.30AM - 5.00PM. Sunday CLOSED</span></p>
<p class="pull-right text-large"><i class="fa fa-phone"></i><span>Tel No. (+77) 853 740 966</span></p>
</div>
</div>
</div>
</div>
Update: <big> is supposed to be deprecated in HTML5, so CSS is the only way. Using a relative size works best no matter what the current font size is.
.font-size-lg { font-size: 1.2rem; }
I haven't found an easy way with Bootstrap, so I use <big>.
<p class="pull-right">
<big><i class="fa fa-phone"></i>Tel No. (+77) 853 740 966</big>
</p>
I wish there was a Bootstrap class so I don't have to use an extra line in HAML.
%p
%big This is bigger.
<span style="font-size:30px">Tel No. (+77) 853 740 966</span>
Or
.large-fontsize{
font-size: 30px !important;
}
<span class="large-fontsize">Tel No. (+77) 853 740 966</span>
If you are using SCSS of similar to generate your CSS, you can add your own global class that slightly increases (+25%) the font size.
In the _variables.scss found in the Bootstrap bundle there is a variable already defined $font-size-lg. Use it to define a class in your own style.scss (or similar) in your project.
.font-size-lg {
font-size: $font-size-lg;
}
Use it in HTML
<span class="font-size-lg">Text to enlarge</span>
You can always bypass bootstrap and edit the font size at the source in-line:
style="font-size:x-large;"
Related
<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 style="font-family:times-new-roman">BIOGRAPHY</h2>
<div id="demo" class="collapse">
<p>
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black">
<br>
<div class="text-center">
<i class="fa fa-angle-double-down" style="font-size:36px;"></i>
</div>
</button>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
I am trying to have this section in a website I'm creating. As you can see, I am using the Bootstrap grid system to make sure the text is only within a certain box. Problem is the text still fills the entire page so the Bootstrap doesn't seem to work. Maybe I'm not doing something right.
Have you included bootstrap 4 and fontawesome css files with jquery in header?
content is showing in bootstrap grid layout only. see my code below and fiddle and check the versions of bootstrap css and js files
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 style="font-family:times-new-roman">BIOGRAPHY</h2>
<div id="demo" class="collapse">
<p>
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black">
<br>
<div class="text-center">
<i class="fa fa-angle-double-down" style="font-size:36px;"></i>
</div>
</button>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I wonder why the css for the div class=iphone isn't working-you can't see a border or anything else I include in the css..however when I was writing the code on codepen it all worked just fine and once I did it on sublime, it won't show anything (but only for the div element with the class iphone). Does anyone know why? Thanks!!
Html:
<body>
<header>
<h1>Guess a Number!</h1>
<h2> - - - - - - - - - - - - -</h2>
<h3>Lets Play</h3>
<h4>Pick a number from 1-100</h4>
</header>
<section>
<div class="iphone"> ..
<div>
<input type="text" name="number" placeholder="number"
class=pickingNumber>
<button class="send"><i class="fa fa-share"></i></button>
</div>
<div class="playAgain">
<button class="buttons">
<p><b>---</b></p>
</button>
<button class="buttons">
<p><b>---</b></p>
</button>
</div>
</div>
</section>
<footer>
<div>
<p class="end">© Made by me</p>
<p class="end">Thanks for visiting!</p>
</footer>
</body>
</html>
part of css for that:
.iphone{
border: 6px solid #949599;
}
Does your HTML have a <link> to the css file?
http://www.w3schools.com/css/css_howto.asp
You have an extra div in the footer it seems. That may be a problem? There are precedential rules too, so make sure that iphone class is the last class loaded with that name.
You may need to give the iphone class some dimensions.
iphone {
height: 100px;
width: 100px;
}
I want to create alert info message with media-object behaviour.
I mean this behaviour:
There is image on the left side of the alert and text on the another side.
What I've tried?
I am getting this:
With such code:
<div class="alert alert-info">
<div class="media">
<span class="pull-left glyphicon glyphicon-exclamation-sign"></span>
<div class="media-body">
<p>string1</p><p>string2</p><p>string3</p>
</div>
</div>
</div>
But glyphicon is too small. I need bigger glyphicon here. How I can make icon bigger or what approach should I use?
This is as far as I could get:
http://jsfiddle.net/9Sx62/
Basically, I wrapped icon with .media-object div, the docs says that it shouldn't be mixed with other components. Then, I increased font-size so icon would be bigger
This helped:
<div class="media">
<span class="pull-left lg glyphicon glyphicon-info-sign"></span>
<div class="media-body">
<p>Статус договора <em>действует</em> означает, что Вы можете сделать заказ на поставку у данного поставщика.</p>
<p>В таблице встречаются строки разных цветов. Зеленый цвет означает, что договор действующий, а серый — срок действия истек.</p>
</div>
</div>
Also, class .lg specified in css:
.lg {
font-size: 1.5em;
}
I want to make an iPad HTML5/CSS3 based app and I found out about JQuery Mobile and tried to use it. Here what it looks like :
This is the summary page, when a user clicks on one of the grid element it should go to the proper detail page. (Click on grid "a" should go to an inner page with id "blockA" etc...).
I encoutered some problems and cannot find any clear clues on the net.
I want my header + photo and summary + "informations" bar to be fixed. The only solution I found is to copy/paste the header div into my "blockA" page and into the 5 others which I found really annoying. Basically I want my top screen to be fixed and my bottom screen to change on link navigation. I thought of using jquery append methods and such but is there any "native" way of doing so?
My header was really hard to bring like you can see it on the picture. I had to change the CSS a bit. Is there any easier way? Some class I missed in the JQuery structure CSS maybe? Can't find any exhaustive class list for JQM.
How to set heights for my different components without modifying CSS.
Here is some of my HTML code :
<body>
<div data-role="page" id="page_main" style="min-height: 496px; ">
<div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
<h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
<ul data-role="listview">
<li class="pta-file-content" data-icon="custom" data-theme="c">
<img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
<div class="ui-grid-a">
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='mail'>whatever.x#mail.com</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
</div>
<div class="ui-block-a">
<p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
</div>
</div>
</li>
</ul>
<h1 class="ui-title">Informations</h1>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<span id='ptaGetUserBlockA'>a</span>
</div>
<div class="ui-block-b">
<span id='ptaGetUserBlockB'>b</span>
</div>
<div class="ui-block-c">
<span id='ptaGetUserBlockC'>c</span>
</div>
<div class="ui-block-a">
<span id='ptaGetUserBlockD'>d</span>
</div>
<div class="ui-block-b">
<span id='ptaGetUserBlockE'>e</span>
</div>
<div class="ui-block-c">
<span id='ptaGetUserBlockF'>f</span>
</div>
</div>
</div>
<div data-role="page" data-title="Page Foo" id="blockA">
<div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
<h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
<ul data-role="listview">
<li class="pta-file-content" data-icon="custom" data-theme="c">
<img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
<div class="ui-grid-a">
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='mail'>whatever.x#mail.com</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
</div>
<div class="ui-block-a">
<p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
</div>
</div>
</li>
</ul>
<h1 class="ui-title">Informations</h1>
</div>
mon bloc A
</div>
</body>
Don't look at the ptaGetUser spans, it's for my later persistence framework that I should work on to add seamless persistence to HTML pages like this. For now though this is just here for nothing. I've also only added the first block for this exemple.
My CSS to make this the right dimension :
.ui-title,.ui-title
{
height:24px;
}
.banner
{
height:45px;
padding: 0px 15px !important;
}
.ui-li-thumb, .ui-li-icon {
max-width:165px;
max-height:165px;
}
.pta-file-content
{
height:148px;
}
.ui-li-has-thumb
{
padding-left: 165px !important;
}
.ui-grid-a
{
padding-top: 5px;
}
.ui-grid-b
{
height:543px;
width: 1022px;
}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
height:50%;
width:32%;
border: 1px solid black;
}
The whole screen slides when I click on the first grid element to show the page. As you can see I've copied the whole header into my second page div which is really bad for code readability. I also have CSS problems with my grid borders as it doesn't show bottom borders, how can I add borders to a grid without modifying CSS?
1) jQuery Mobile doesn't currently offer persistent headers and footers, but an upcoming version, 1.1, will. Whether or not they stay on the page during transitions is something that has not yet been answered. Your best bet is to use some sort of server-side language for your pages, then set the header as an include. That way you don't have to copy and paste across multiple pages.
2) jQuery Mobile is great for building apps, but to get something truly custom, you've got to write it yourself; be that CSS or HTML or both.
3) Only way to achieve custom heights for your elements is to write custom CSS.
It sounds like you are trying to do a lot without modifying CSS. Why is that a requirement of your project?
It sounds like you are looking for a persistent header. Start here with the JQM Footers documentation. They cover persistence and it should be the same for headers. If the JQM docs do not solve this issue, check out this other Stackoverflow post.
If you are looking for a custom configuration, check out the very bottom of this documentation on JQM headers. If that doesn't quite do it you may also try the JQM layout grids. Otherwise, you will need CSS, be it inline or otherwise.
While I am not sure I completely understand the problem here, I have heard that CSS/HTML should be used to control layout width, but not height. Sorry, having trouble finding the articles to back that up so lets just consider that one design philosophy. Just the same, this post tells you how to evenly balance height with CSS.
As for your last question about borders, you would have to use CSS to control them. Whether or not you do it inline or a stylesheet like one created with the JQM Themeroller, I am not aware of any other way of styling borders other than CSS.
Hope this helps!