I want to print a bootstrap page. Here is my page layout
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="image/logo.png">
</div>
</div>
</div>
<div class="container" id="student">
<div class="row">
<div class="col-sm-4">
<h1>Student</h1>
</div>
<div class="col-sm-offset-2 col-sm-6" id="date">
<form class="form-inline">
<div class="form-group">
<label for="focusedInput"> <b>Date:</b></label>
<input class="form-control" id="focusedInput" type="text" placeholder="DD Month Year">
</div>
</form>
</div>
</div>
</div>
Also I've css
#font-face {
font-family: "myfont";
src: url("../fonts/opensans/OpenSans-Regular 2.ttf");
}
body{
font-family: "myfont";
/*-webkit-print-color-adjust: exact;*/
}
img{
width: 150px;
}
#student{
margin-top: 50px;
}
#date{
background: black;
margin-top: 20px;
color: white;
padding: 10px;
}
Problem is: css is not loading properly. I tried searching stackoverflow but did not get any exact solution. How can I do that?
Here is the fiddle https://jsfiddle.net/wc6rga7o/
try
#media print {
/* Your styles here */
body{
color: #111111;
}
#date{
-webkit-print-color-adjust: exact!important;
}
}
updated your fiddle https://jsfiddle.net/wc6rga7o/2/
Related
I am trying to make this text
but how can I make it same height and make inline each other
<div class="row">
<div class="col-xs-12 text-center">
<p style="display:inline">初期費用 <br> 月額費用 <br>手続き料</p>
<h3 style="display:inline">0<span>円</span></h3>
</div>
</div>
Try this:
p, h3{
display: inline-block;
}
h3 {
color: skyblue;
font-size: 70px;
}
<div class="row">
<div class="col-xs-12 text-center">
<p>初期費用 <br> 月額費用 <br>手続き料</p>
<h3>0<span>円</span></h3>
</div>
</div>
Using display flex
.col-xs-12 {
display: flex;
align-items: center;
padding: 0;
}
p {
font-size: 16px;
line-height: 1.5;
margin-right: 8px;
}
h3 {
font-size: 102px;
margin: 0;
}
h3 span {
font-size: 32px
}
<div class="row">
<div class="col-xs-12 text-center container">
<p>初期費用 <br> 月額費用 <br>手続き料</p>
<h3>0<span>円</span></h3>
</div>
</div>
Here you go with a solution
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 text-center">
<div style="display: flex;">
<p style="display: inline-flex">初期費用 <br> 月額費用 <br>手続き料</p>
<h3 style="display: inline-flex">0<span>円</span></h3>
</div>
</div>
</div>
Solution using flex & inline-flex
I am creating a screen to a kiosk/totem machine and I need to use large fonts.
I have a problem using input group with font awesome icons and alignment.
As I use large fonts, I had to add a 'margin-top:10px' to align the input to your label.
The side effect is that the awesome icon becomes misaligned on top.
Fiddle: http://jsfiddle.net/vb0xo8wb/
//markup
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 form-container">
<form class="form form-horizontal" name="regForm" autocomplete="false" novalidate="" role="form">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="form-group">
<label class="col-sm-2 control-label">Nome</label>
<div class="col-sm-10 recuo">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user fa-2x bg-info"></i>
</span>
<input take-focus="" type="text" class="form-control input-lg" name="user_name" required="" placeholder="Digite seu nome">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//css
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
html, html * {
font-family: Roboto;
}
form label {
font-size: 28px !important;
}
form input, form textarea, form select {
margin-top:10px;
font-family: Roboto;
font-weight: bold;
}
.recuo{
padding-left:30px;
}
.fonte_big {
font-size: 28px !important;
}
.form-container {
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
margin-top:50px;
}
Adding
.input-lg {
margin: 0 !important;
}
should fix the issue.
I am using bootstrap 3. Here is my code
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="form-title">Apply for Plan</div>
<div class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
And it produces this layout
You can see the title 'Apply for Plan' does not align with the form controls on the left hand side.
it is because of these settings by Bootstrap
margin-left: -15px;
margin-right: -15px;
I can fix this issue by adding them too to my css class .form-title and .divisionify
However is there a better way to fix the alignment?
This is my desired layout
Why not just override the Bootstrap styles with your own?
Add this to your code:
.form-group {
margin-right: 0 !important;
margin-left: 0 !important;
}
Give a padding of the left and right of the .form-title and .divisionify
.divisionify {
margin-left: -15px;
margin-right: -15px;
}
.form-title{
margin-left: -15px;
margin-right: -15px;
}
Check live
The problem with using the !important thing is that everything will end up being important to you. I would use parent-to-child calls example:
#father.child{margin-right: 0px; margin-left: 0px;}.
With this, you will govern without using the !important. Think that using the !important you are going to change the default responsive of Bootstrap to the whole page for this case.
DOC:What are the implications of using "!important" in CSS?
You can add an additional id to the elements and style them according to your wish. In this way you can avoid !important. This is the way preferred by me.
Edited code snippet
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
#applyPlan {
margin-left: -15px;
margin-right: -15px;
}
#division {
margin-left: -15px;
margin-right: -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div id= "applyPlan" class="form-title">Apply for Plan</div>
<div id="division" class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
I've got a jumbotron class which has to contain a button, but it's strangely extended and that button looks ugly. Why is that so?
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok">
Why is this button so wide?
</span>
</button>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
If I try to reduce the size of the column, for example, col-md-4, nothing changes.
Your mistake is you wrote the text inside icon span. Here is the fixed code
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Why is this button so wide?
</button>
</div>
</div>
</div>
</div>
in main page use this...
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome!!!</div>
<div class="intro-heading">Let's Get Started</div>
Tell Me More
</div>
</div>
</header>
in css
use this
.btn-xl {
padding: 20px 40px;
border-color: #fed136;
border-radius: 3px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
background-color: #fed136;
}
this will solve your problem
Does anybody knows how to group two cells of two rows in a table, using CSS display property value table-row-group?
I know that in CSS rowspan doesn't exist but table-row-group is defined to be equivalent to tbody as I can read in this http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.
In the following code, I used some divs to create a table using table as CSS display property value. Then in this brand new table, I want to group together the divs having the role of cells, with id row2_cell2 and row3_cell2. I have tried to do it, but, without success, using the value table-row-group of the CSS property display:
<div id='table'>
<div class='row'>
<div class='cell'>
</div>
<div class='cell'>
</div>
</div>
<div class='row_group'>
<div id='row_2' class='row'>
<div class='cell'>
</div>
<div id='row2_cell2' class='cell'>
</div>
</div>
<div id='row_footer' class='row'>
<div class='cell'>
</div>
<div id='row3_cell2' class='cell'>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/framj00/2eN3U/
Can you help me please to resolve this problem? many thanks!
table-row-group works only with table element in HTML.So instead of divs use table.You can follow the Fiddle
<html>
<head>
<style>
.black {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
padding: 3px;
}
.tbl { display: table; }
.row { display: table-row; }
.cel { display: table-cell; }
.cpt {
display: table-caption;
text-align: center;
}
.thc {
display: table-cell;
background-color:#f2e8da;
text-align: center;
font-weight: bold;
}
.row:nth-child(odd) { background-color: #def; }
.row:nth-child(even) { background-color: #fff; }
.row:hover {background-color:#f2e8da; }
.tbody { display: table-row-group }
.thead { display: table-header-group }
input {
width: 100%;
background-color: inherit;
}
</style>
</head>
<body>
<div class="tbl black">
<div class="cpt"><input type="search" placeholder="search me"/></div>
<div class="thead">
<div class="row black">
<div class="thc black">name</div>
<div class="thc black">form</div>
</div>
</div>
<div class="tbody" id="data">
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="1"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="2"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="3"/></div>
</form>
</div>
</div>
</body>
</html>