I need to split a row into two so that I can accommodate two headings in a row, something like below:
With the current code that I have written, I am unable to separate the row into two like the above and also unable to maintain the responsiveness like below:
Below is the output that I am getting with the current code:
Below here is the code:
<div class="container-fluid mail-body" style="width: 740px;">
<div id="account" class="row your-account">
<div class="col text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
Your Account
</div>
</div>
<!-- /.your-account -->
<div id="logo" class="row">
<div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
LOGO
</div>
</div>
<!-- /.logo -->
<div id="order-text" class="row">
<div class="col text-center" style="min-height: 98px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:36px; color: #0471AF; font-weight:100; display: flex; justify-content: center;">
<span style="align-self: center;">Heading Text</span>
</div>
</div>
<!-- /.order-text -->
<div class="row">
<div id="left-side-text" class="col-md-8 col-sm-12" style=" line-height: 18px;">
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; line-height: 18px; font-weight:100;">
Dear XYZ,
</span>
<br>
<br>
<span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left; padding-bottom:20px;">Good news! Your order is confirmed.</span>
<br>
<br>
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
Some other text
</span>
</div>
<!-- /.left-side text -->
<div id="order-information" class="col-md-4 col-sm-12 order-2">
<div class="col" style="height: 43px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:16px; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
Order Details
</div>
<div class="col" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color: #333333; padding: 10px; height: 73px; border: 1px solid #999999; border-top: none;">
<table>
<tr>
<td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
</tr>
<tr>
<td class="col-2 font-weight-bold" style="padding: 0px;">Order #:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
</tr>
</table>
</div>
</div>
<!-- /.order-information -->
<div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
<br>
<br>Text1
<br>
<br> Text
<br> Text
</div>
</div>
<div id="confirmation-email" class="row order-1">
<div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
<br>
<br>Text1
<br>
<br> Text
<br> Text
</div>
</div>
<div class="row">
<div class="col-md-12" >
<div class="col" style="height: 36px; vertical-align:middle; font-size: 12px; font-family:Helvetica, Arial, sans-serif; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
<span class="">Product(s) Ready for Pickup</span>
<span class="text-right">Quantity</span>
</div>
</div>
</div>
Please help me with the proper setup of the html as well the bootstrap classes so as to achieve the expected result.
Thanks!
Here is super easy/clean code:
<div class="row">
<div class="col" >
Product(s) Ready for Pickup
</div>
<div class="col text-right" >
Quantity
</div>
</div>
See the preview link: https://codepen.io/ziruhel/pen/LOZjWZ
You need to make two columns within your row using the col-sm-6 (or relevant classes as per the device needs). Assuming you need the row to have 2 columns for small, Medium, Large devices and 1 column for extra small devices, Below is my suggestion (Note: I have removed the style rules for better readability).
<div class="row col-md-12">
<div class="col-xs-12 col-sm-6" >
<span class="float-left">Product(s) Ready for Pickup</span>
</div>
<div class="col-xs-12 col-sm-6" >
<span class="float-right">Quantity</span>
</div>
</div>
Use col-xl-{value} to get columns.
Bootstrap Grid http://getbootstrap.com/docs/4.0/layout/grid/
<div class="row"> //row
<div class="col-xs-6" > //column 1 for extra large screen, use sm for small, md for medium screen
<span>Product(s) Ready for Pickup</span>
</div>
<div class="col-xs-6" > //column 2
<span>Quantity</span>
</div>
</div>
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
<div class="row">
<div class="col-md-9" >
Product(s) Ready for Pickup
</div>
<div class="col-md-3 text-center" >
Quantity
</div>
</div>
Related
I use barryvdh/laravel-snappy to generate pdf and need to create a signature area in my pdf doc. There must be two signature fields because it's a contract pdf but when I use css grid or flex they place one under the other. How to place them side by side?
<div class="flex-container" style=" display:flex;
padding: 10px;">
<div class="flex-item" style="padding: 20px; text-align: center;">
<h2 style="text-decoration:underline">sign1</h2>
</div>
<div class="flex-item" style="padding: 20px; text-align: center;">
<h2 style="text-decoration:underline">sign2</h2>
</div>
</div>
<div class="flex-container" style=" margin: auto; display:table;
padding: 10px;border:1px solid red">
<div class="flex-item" style="padding: 20px; text-align: center;background-color: blue; display: table-cell">
<h2 style="text-decoration:underline">sign1</h2>
</div>
<div class="flex-item" style=" margin: auto; padding: 20px; text-align: center;background-color: green; display:table-cell">
<h2 style="text-decoration:underline">sign2</h2>
</div>
</div>
True, I tried to convert HTML with flex to PDF. The two containers go on two lines. My advice is to use 'display:table' to '.flex-container' and 'display: table-cell' to '.flex-item. That worked out for me.
I have this table where I have some items inside one of the TDs. I need them to be centerd but left-aligned.
Right now the td looks like this:
$12.95 is slightly to the left.
I want it to look like this:
Here's the code:
table {
border-collapse: collapse;
}
table tr {
text-align: center;
margin-bottom: 1px;
}
table td {
border: 1px solid #ddd;
font-size: 13px;
padding: 10px 0;
height: 90px;
width: 100px;
}
table tr td:last-child{
width: 200px;
}
.price-container .price-package-one,
.price-container .price-package-two,
.price-container .price-package-three {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.price-container .price-package-one .price-value p,
.price-container .price-package-two .price-value p,
.price-container .price-package-three .price-value p {
font-size: 15px;
font-weight: bold;
}
.price-container .price-package-one .price-value span,
.price-container .price-package-two .price-value span,
.price-container .price-package-three .price-value span{
font-size: 11px;
}
.price-container .price-package-one .price-saving p,
.price-container .price-package-two .price-saving p,
.price-container .price-package-three .price-saving p{
color: red;
font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Details</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="price-container">
<div class="price-package-one">
<div class="price-value text-left mr-5">
<p class="m-0">$2.49/month</p>
<span>(24 months)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>74%</p>
</div>
</div>
<div class="price-package-two">
<div class="price-value text-left mr-5">
<p class="m-0">$6.49/month</p>
<span>(06 months)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>47%</p>
</div>
</div>
<div class="price-package-three">
<div class="price-value text-left mr-5">
<p class="m-0">$12.95/month</p>
<span>(01 month)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>7%</p>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Use a space-between alignment then add spaces on the sides. You can rely on bootstrap classes for this
table {
border-collapse: collapse;
}
table tr {
text-align: center;
margin-bottom: 1px;
}
table td {
border: 1px solid #ddd;
font-size: 13px;
padding: 10px 0;
height: 90px;
width: 100px;
}
table tr td:last-child{
width: 200px;
}
.price-container .price-value p {
font-size: 15px;
}
.price-container .price-value span{
font-size: 11px;
}
.price-container .price-saving p{
color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Details</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="price-container">
<div class="price-package-one d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$2.49/month</p>
<span>(24 months)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0 ">Save <br>74%</p>
</div>
</div>
<div class="price-package-two d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$6.49/month</p>
<span>(06 months)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0">Save <br>47%</p>
</div>
</div>
<div class="price-package-three d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$12.95/month</p>
<span>(01 month)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0">Save <br>7%</p>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I have the table below and in each 'td' I have two divs. One that shows a header and one that shows some number. The table is currently aligned to the left. I want to center the number under the center part of the div above it (taught, hosted, points), but still keep the header info aligned to the left as far as possible. Should I use the 'th' tag for this or some other css?
Here is my table and my fiddle
table,
th,
td {
border: 1px solid black;
}
<div id="pointsTags" style="">
<table style="width: 100%;">
<tr>
<td>
<div style="font-size: 20px;">Hosted</div>
<div id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>
</td>
<td>
<div style="font-size: 20px;">Attended</div>
<div id="totalAttended" style="font-size: 25px; font-family: Playfair Display,serif">45</div>
</td>
<td>
<div style="font-size: 20px;">Taught</div>
<div id="totalTaught" style="font-size: 25px; font-family: Playfair Display,serif">344</div>
</td>
<td>
<div style="font-size: 20px;">Points</div>
<div id="totalPoints" style="font-size: 25px; font-family: Playfair Display,serif">0</div>
</td>
</tr>
</table>
</div>
I've edited my question a little more to reflect what I am looking for, all answers are incorrect as they are centering the number inside the td, not on the div above it
first, you need to wrap your two div into one div and give set display:inline-block to it. and add text-align:center to second div.
table,
th,
td {
border: 1px solid black;
}
<div id="pointsTags" style="">
<table style="width: 100%;">
<tr>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Hosted</div>
<div id="totalHosted" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">6</div>
</div>
</td>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Attended</div>
<div id="totalAttended" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">45</div>
</div>
</td>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Taught</div>
<div id="totalTaught" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">344</div>
</div>
</td>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Points</div>
<div id="totalPoints" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">0</div>
</div>
</td>
</tr>
</table>
</div>
hi the best way to do this is .
give the divs a same class like
<td>
<div style="font-size: 20px;" class="sameclass">Hosted</div>
<div class="centerDivText sameclass" id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>
</td>
now you can use css to do this like-td>:nth-child(2){text-align:center;}
or
td>:nth-child(2) .sameclass{text-align:center;}
try this i hope it will work
if you want to align the upper div text use-
td:nth-child(1).sameclass{text-align:center;}
You need to add following lines to the css file. No need to create any class.
Here is the fiddle.
tr td div:nth-of-type(2){
text-align:center;
}
I have a list of projects consists of multiples lines.Each line consists of 3 divs:
The first contain a logo.
The second contains the title, state and the date of the project.
The third contains some more infos.
I want to put the 3 divs on the same line and take in consideration the width of different resolutions of device into the display of the page.
index.html:
As a result I got the logo in a line and the two other divs in another line.How can I fix that?
#list_project {
position: relative;
top: 120px;
z-index: 1;
}
.project_logo {
display: block;
height: 60px;
}
.project_title {
font-size: 18px;
font-family: "Arial";
color: #000000;
font-weight: bold;
line-height: 1.2;
}
.project_status {
font-size: 18px;
font-family: "Arial Round MT Bold";
color: #8e8e8e;
line-height: 1.2;
}
.project_date {
font-size: 18px;
font-family: "Arial";
color: #8e8e8e;
line-height: 1.2;
}
.project_info_1 {
border-radius: 10px;
background-color: #e6e1e1;
height: 63px;
}
.project_cost {
font-size: 16px;
font-family: "Arial";
color: #000000;
font-weight: bold;
line-height: 1.2;
}
.project_cost_1 {
font-size: 16px;
font-family: "Arial";
color: #8e8e8e;
font-weight: bold;
line-height: 1.2;
}
<div id="list_project">
<div class="container-fluid">
<div class="row">
<div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img class="project_logo" src="./logos/logo.png" />
</div>
<div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4">
<table>
<tbody>
<tr>
<td class="project_title"> Project 1 </td>
</tr>
<tr>
<td class="project_status">Active</td>
</tr>
<tr>
<td class="project_date">03/2017-05/2018</td>
</tr>
</tbody>
</table>
</div>
<div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4">
<table class="project_info_1">
<tbody>
<tr>
<td class="project_cost" name="project_cost">Cost:</td>
<td class="project_cost_1" name="project_cost_1">140.000k$.</td>
</tr>
<tr>
<td class="project_cost" name="project_delay">Delay:</td>
<td class="project_cost_1" name="project_delay_1">350 days.</td>
</tr>
<tr>
<td class="project_cost" name="project_load">Load:</td>
<td class="project_cost_1" name="project_load_1">125 days.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Ok First of all it won't work because you have clas="..." and not class="..". So that alone won't make it work
Lastly, as a guide "col col-sm-4 col-md-4 col-lg-4 col-xl-4" is not needed.
You can use only "col col-sm-4 col-md-4" because any resolution bigger will use the last 'highest span' found, if you know what I mean which in your case is col-md-4 if you make the change, therefore col-md-4 will be 4 for lg, xl, xxl as well.
You only add the col-lg and so on if there are to be of different span size
<div class="row">
<div class="col-md-6">
//FIRST DIV HERE
</div>
<div class="col-md-6">
//SECOND DIV HERE
</div>
</div>
'Class' is misspelled. You have used 'clas' instead of "class"
how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/