I have changed the margin in the row in the CSS file but it wont applied in small devices
<body style="background-color: #353839;">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-2" style="color: white;">Cyber Cloud</h1>
</div>
</div>
<div class="row r1 " style="background-color: black; ">
<div class="col-12 ">
<h3 class="text-center" style="color: white;">Join Now</h3>
<p class="text-center" style="color: white;">And Start Buying Games</p>
</div>
<div class="row ">
<div class="col-12 r2">
<input type="text" placeholder="Email"/>
</div>
</div>
</div>
</div>
My CSS:
.r1{
margin-left: 500px;
margin-right: 500px;
}
I have tried to apply bootstrap responsive CSS(added d-none d-lg-block) yet it doesn't work .
try to use media queries in css and set the display width of a device, use developer tools to change display width to simulate a device
#media only screen and (max-width: 600px){
.r1{
margin-left: 500px;
margin-right: 500px;
}
}
hope this works
Try this code.
Bootstrap 4 and 5 give you the ability to display or not to display an element.
I added d-md-none in that row you want to show in the small device, and it will not show on the wide devices.
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-2" style="color: black;">Cyber Cloud</h1>
</div>
</div>
<div class="row d-md-none" style="background-color: black; ">
<div class="col-12 ">
<h3 class="text-center" style="color: white;">Join Now</h3>
<p class="text-center" style="color: white;">And Start Buying Games</p>
</div>
<div class="row ">
<div class="col-12 r2">
<input type="text" placeholder="Email"/>
</div>
</div>
</div>
</div>
Related
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I have a modal with some data on it and I need to print it exactly like it is on the modal. I have some JavaScript to print the div where the content is but the problem is the bootstrap classes don't get recognized during the print and so the entire layout changes.
function printDiv() {
var winPrint = window.open();
/*var header = '#include("report/header")';*/
/*var body = '#include("memberpayment/monthlybill")';*/
var body = document.getElementById('printarea').innerHTML;
winPrint.document.write(body);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
my modal:
my print view:
From searching online it seems I need to include the bootstrap library before I write the print content (source)
This did not work for me as when I write a file before it gives a blank 2 pages on my print view. I've tried using the jQuery plugin printThis
4: https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html which also did not work out.
in this questionit seems adding a media="print" to the link seemed to work aswell but it didn't work for me.
This is my Modal code:
<div class="container-fluid" id="printarea" style="padding: 2rem 4rem;">
<!-- ----------------------top heading part---------------------- -->
<div class="row" style="border: 1px solid black;">
<div class="col-md-4 center">
#if(file_exists(public_path().'/bzBuilder/images/'.CNF_LOGO) && CNF_LOGO !='')
<img src="{{ asset('bzBuilder/images/'.CNF_LOGO)}}" width="150" alt="{{ CNF_APPNAME }}"/>
#else
<img src="{{ asset('bzBuilder/images/logo.png')}}" width="150" alt="{{ CNF_APPNAME }}"/>
#endif
</div>
<div class="col-md-8 center arial" style="font-weight: bold;">
<p style="padding-top: 1rem;">
Royal Bombay Yacht Club
</p>
<p>
C.S.M Marg, Apollo Bunder, Mumbai - 400001.Tel : +91-22-22021880 / 67527200.
</p>
<p>
Fax : +91-22-2202 1014 Email: rbycmail#vsnl.net & billing#rbyc.co.in
</p>
</div>
</div>
<!-- ----------------------details and address ---------------------- -->
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p><b>GODREJ ADI BURJOR ESQ., [G0014 ]</b></p>
<br>
<p>
OFFICE - GODREJ INDUSTRIES LIMITED,
PIROJSHANAGAR, EASTERN EXPRESS HIGHWAY, VIKHROLI, MUMBAI - 400 079
</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12" style="border: 1px solid black;">
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Membership No: <b>G0014</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Bill Dated: <b>21/08/2018</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">BillRef : <b>G0014-8</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Due Date: <b>15/10/2018</b></div>
</div>
</div>
<br>
<!-- ----------------------from/to date ---------------------- -->
<div class="row centerWhenSmall">
<div class="col-md-3 col-sm-12">From: <b>01-Aug-2018</b></div>
<div class="col-md-3 col-sm-12">To: <b>31-Aug-2018</b></div>
</div>
<!-- ----------------------table top part---------------------- -->
<div class="row tablePadding">
<table class="customTable">
<tr>
<th>Narration</th>
<th class="center">Dr.</th>
<th class="center">Cr.</th>
</tr>
</table>
</div>
<!-- ----------------------table mid part---------------------- -->
<div class="row tablePadding2">
<table class="customTable2">
<tr>
<th>BNo:32775 on 21/08/18 - DINING ROOM</th>
<th class="borderBottom center">1,082.00 </th>
<th class="borderBottom center"></th>
</tr>
</table>
</div>
<!-- ----------------------table body---------------------- -->
<div class="row tablePadding3">
<table class="customTable3">
{{--<tr>--}}
{{--<th class="center">Monthly Total : </th>--}}
{{--<th class="center">1,082.00</th>--}}
{{--<th class="center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Previous Outstanding : </th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Amount Due/Credit Balance : </th>--}}
{{--<th class="borderBottom center">1,082.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
</table>
</div>
<br>
<!-- ----------------------disclaimer---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
<div class="col-md-12 col-sm-12">
Bill Dated : 21/08/2018
</div>
<div class="col-md-12 col-sm-12 borderBottom">
<b>To be cleared by : 15/October/2018</b>
</div>
</div>
<!-- ----------------------notice---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12" style="margin-bottom: 3%;">
IF YOUR BILL SHOWS ARREARS,THEN ENTIRE AMOUNT BE PAID IMMEDIATELY.
</div>
<div class="col-md-12" style="text-decoration: underline;">
Amount Due/Credit Balance Is As On 31 August 2018. Subsequent Payments Will Be Credited In The Following Month.
</div>
<div class="col-md-12">
PAYMENT RECEIVED AFTER DUE DATE ATTRACT DELAYED PAYMENT CHARGES # 2% ON OUTSTANDING AMOUNT
</div>
<div class="col-md-12">
<b style="font-weight: 900">REQUEST INFORM DETAILS OF PAYMENT MADE BY BANK TRANSFER/NEFT/RTGS/ BY EMAIL TO
accounts#rbyc.co.in and billing#rbyc.co.in FOR PROMPT UPDATION OF MEMBERS ACCOUNT</b>
</div>
<div class="col-md-12">
Beneficiary : Royal Bombay Yacht Club
</div>
</div>
<!-- ----------------------bank details---------------------- -->
<div class="row">
<div class="col-md-6">
<b style="font-weight: 800">HDFC BANK</b><br>
REGAL CINEMA BUILDING,<br>
SHAHID BHAGATSINGH ROAD,<br>
MUMBAI - 400 039<br>
Current Account No : <b>00852530000017</b><br>
SWIFT NO: <b>HDFCINBB</b> [ OVERSEAS TRANSFER ]*<br>
IFSC NO: <b>HDFC0000085</b> [ IN INDIA TRANSFER ] *
</div>
<div class="col-md-6">
<b style="font-weight: 800">YES BANK LTD.</b><br>
Mittal Chambers, Nariman Point,<br>
MUMBAI - 400 021<br>
Savings Account No : <b>000494600000162</b><br>
SWIFT NO : <b>YESBINBB</b> [ OVERSEAS TRANSFER]*<br>
IFSC NO : <b>YESB0000004</b> [ IN INDIA TRANSFER ]*
</div>
</div>
<!-- ----------------------notice 2---------------------- -->
<div class="row">
<div class="col-md-12" style="font-weight: 900">
MEMBERS ARE REQUESTED TO CARRY THEIR MEMBERSHIP CARD AND PRODUCE IT WHEN PLACING AN
ORDER.THIS IS TO AVOID ANY ERRORS IN BILLING.
</div>
</div>
<!-- ----------------------vat tin pan gst---------------------- -->
<div class="row">
<div class="col-md-9" style="font-size: 1.3rem; width: 70%;">
<div class="col-md-4">VAT TIN : 27720003820V</div>
<div class="col-md-4">PAN : AAAAR0071R</div>
<div class="col-md-4">GST : 27AAAAR0071R1Z7</div>
</div>
<div class="col-md-6"></div>
</div>
<!-- ----------------------bottom paragraph---------------------- -->
<div class="row">
<div class="col-md-12">
I/We certify that our S.T registration Certificate under B.S.T Act 1959 is in force on the date on which the sale of the goods
specified in this bill/cash memorandum and that the transactions of sale covered by this bill/cash memorandum has been
effected by us in the regular course of our business.
</div>
</div>
<!-- ----------------------disclaimer 2---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
</div>
<!-- ----------------------bottom---------------------- -->
<div class="row" style="margin-top: 20%;">
<div class="col-md-12 center">
--------------------------------------PLEASE TEAR OFF AND SEND THIS WITH YOUR CASH/CHEQUE------------------------------------
</div>
<div class="col-md-12 center">
I am sending herewith cash/cheque for Rs.___________________ in payment of BillRef :
G0014-8 dated: 21/08/2018 Name: GODREJ ADI BURJOR ESQ., [G0014 ]
</div>
</div>
<!-- ----------------------print---------------------- -->
</div>
<div class="row" style="margin-bottom: 5%; ">
<div class="col-md-5"></div>
<div class="col-md-3">
<button style="text-align: center;" type="button" onclick='printDiv();' class="btn btn-primary btn-sm print-bill"><i
class="fa fa-print"></i> Print
</button>
<!-- <button style="text-align: center;" type="button" class="btn btn-primary btn-sm print-bill">
<i class="fa fa-print"></i> Print
</button> -->
<button type="button" class="btn btn-info btn-sm pay-bill" data-toggle="modal" data-target="#paybill">PAY
</button>
</div>
<div class="col-md-4"></div>
</div>
When creating Html for printing, kindly note that the element css floating doesn't work very well in cross browser for HTML printing.
so, to quick fix your issue, kindly add below css inside the modal HTML (at the beginning) -
<style>
/* this stylesheet is used when generating a PDF */
/* define a page */
#page {
size: auto; /* OR 6.5in 8.5in; A4 */
margin-top: 0.5cm;
margin-left: 0.5cm;
margin-right: 0.5cm;
}
#media print {
[class*="col-md-"] {
float: none;
display:table-cell;
}
[class*="col-lg-"] {
float: none;
display:table-cell;
}
}
</style>
Additionally, in your html there is scope to do the refinements to make it more compatible for printing.
I hope this may help you.
I know this has been asked many times but I've tried pretty much anything I've read so far.
I want to align both horizontally and vertically an img inside a div.
The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.
I can align horizontally OR vertically but not both.
HTML code: https://pastebin.com/7dCQ1aJg
<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10 col-sm-12 content">
<div class="row content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-lg-12 col-md-12 col-sm-12 modal-content">
<div class="row content">
<div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
<div class="row content">
<!-- pic here -->
<img id="pic" src="">
</div>
</div>
<div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
<div class="row content">
<div id="modaluserdata" class="col-lg-12">
<div class="row content">
<div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">
</div>
<div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">
</div>
</div>
</div>
<div id="modalsocial" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modalcomments" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modaltypecomment" class="col-lg-12">
<div class="row content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q
(.content only contains "height: inherit" and the modal is 550px)
Thank you!
Easy with Flexbox :
div.container{
width: 500px;
height: 400px;
border: red dashed 2px;
display: flex;
justify-content: center;
align-items : center;
}
<div class="container">
<img src="http://lorempixel.com/300/200/"/>
</div>
In my code i'm using bootstrap (navs) like this in my html :
{{extend 'layout.html'}}
<div class="row" id="container_R_economics">
<div class="span12">
<div class="dropdown ">
<select class=" btn-Action" id="groupe" >
<option value="">Awaiting data...</option>
</select>
</div>
</div>
<div class="span3" id="reportingContainer"></div>
<div class="span7 offset1" id="dashboard">
<div id="combochart"></div>
<div id="control" style='height:50px'></div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs"></ul>
<div class="tab-content" id="graphTabsContent"></div>
</div>
<div class="row" id="container_R_physics">
<div class="span4 offset4" id="dashboard_div">
<div id="chart_div" style='width: 600px; height: 300px;'></div>
<div id="filter_div" style='width: 600px; height: 80px;'></div>
</div>
when i use bootstrap (navs) in my page web in (<div class="row" id="container_R_economics">) and (<div class="row" id="container_R_physics">) i have a scrolling, how i cant deactivate it?
have you tried setting the overflow to hidden:
.yourclass-name{
overflow:hidden;
}