I want both the textbox and the button to occupy the entire div (which is colored) only using bootstrap. Here I show you a screenshot of my screen: https://postimg.cc/yJcPtVSg. I have tried several things (put the col-12) but I have not been successful. This is my code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<LINK REL=StyleSheet HREF="css2/bootstrap.css" TYPE="text/css">
</head>
<body>
<div class="container" style='height:600px;'>
<div class='row h-100 '>
<div class='col bg-danger my-auto d-flex justify-content-center alig-items-center '>
<form action="lineas.php" method="post">
<div class ='row m-3 '>
<?php echo("Elige origen: ");?>
<input type="text" id="origen" name="origen" class="form-control ">
</div>
<div class ="row m-3">
<?php echo("Elige destino: ");?>
<input type="text" id="destino" name="destino" class="form-control">
</div>
<div class ="row m-3">
Selecciona una fecha: <input type="text" id="datepicker" name="fecha" class="form-control">
</div>
<div class ="row m-3">
<input type="submit" name="enviar" value="Enviar" class="btn btn-primary btn-block">
</div>
</form>
<script src="js2/popper.min.js" type="text/javascript"></script>
<script src="js2/utilidades.js" type="text/javascript"></script>
</div>
</div>
</div>
</body>
</html>
Add this CSS.
.full-width {
width: 100vw;
position: relative;
left: 50%; /* adds left 50% to the element */
right: 50%; /* adds right 50% to the element */
margin-left: -50vw; /* it works as left: 0 */
margin-right: -50vw; /* it works as right: 0 */
}
add another div with class = "container" before form. it will work
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 days ago.
Improve this question
In the following codes I used universal header and footer and my problem is that when I add universal footer(I mean this part of code : ) calendrer does not open and I can not select date and time there!! and when I remove footer everything is fine!! I wonder what should I do to overcome this problem.
Thank you for your help in advance
<?php
$title = "drinkmenu";
include "header.php" ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<style>
body {
background-image: url(images/salad.jpg);
color: white;
text-align: center;
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
mmargin-top: 90px;
display: flex;
flex-flow: column;
overflow-x: hidden;
}
.image {
display: block;
width: 100%;
height: 100%;
}
h2 , h3 {
margin-left: 1%;
color: white !important;
}
#booking {
margin-left: 1%;
background-color: rgb(43, 26, 8);
}
</style>
</head>
<body>
<div class="row">
<h2>Book a table</h2>
</div>
<div class="row">
<div class="col" id="booking">
<label for="sel1" class="form-label">Party size</label>
<select class="form-select form-select-lg mb-5" id="sel1" name="sellist1">
<option>1 person</option>
<option>2 persons</option>
<option>3 persons</option>
<option>4 persons</option>
<option>+5 persons</option>
</select>
<div class="">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br/>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker2').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker3').datetimepicker({
format: 'hh:mm A',
});
});
</script>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col" id="">
<img class="image" src="images/Bookatable.jpg" alt="Moroccan tomato salad">
</div>
</div>
<?php include "footer.php" ?>
</body>
</html>
i expect calendar works properly
I've recently started working as a Junior Network Engineer and as my first task I was assigned to make a simple modification on php.ini file in moodle. Therefore, first I setup moodle environment on my laptop with Apache2 and Ubuntu 20.4. Then I tested my modification locally. That was ok.
However, before make the same changes to the live server, I wanted to test that on the Testbed server as well. A replica of the live moodle server has been uploaded into the testbed server. However, initially the problem was that whenever I tried to run moodle on the testbed server, that redirected into the live server, and therefore I could not test my modifications.
Later I made few changes in the 'config.php' and 'login.php' in moodle directory, which have been presented in the images. With those changes, now the login page can be run locally on the testbed server. But still, when I try to login to the system, the page redirects to the live webpage.
Therefore, I appreciate it very much if someone could help me resolve this issue.
Thank you!
Testbed server information:
OS- CentOS 6.5
PHP version-7.2.30
server-Apache2
Moodle version-3.6.4
config.php
login.php
<!DOCTYPE html>
<html dir="ltr" xml:lang="en" lang="en">
<head>
<title>TestBed Server ULMS | ***</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="assets/all.css">
<link href="assets/css_002.css" rel="stylesheet" type="text/css">
<link href="assets/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="core/first"
src="assets/first.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="core/event"
src="assets/event.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery"
src="assets/jquery-3.js"></script>
</head>
<body id="page-login-index"
class="format-site path-login gecko dir-ltr lang-en yui-skin-sam yui3-skin-sam moodle-wit-ie pagelayout-login course-1 context-1 notloggedin jsenabled"
style="background-image: url(''); background-repeat: no-repeat; background-position: center center;">
<div id="page-wrapper" class="login-page-wrapper">
<div>
<a class="sr-only sr-only-focusable" href="#maincontent">Skip to main content</a>
</div>
<script type="text/javascript" src="assets/yui_combo_004.php"></script>
<script type="text/javascript" src="assets/javascript-static.js"></script>
<style>
.btn-info {
color: #fff;
background-color: #5bc0de !important;
border-color: #5bc0de !important;
}
</style>
<div id="page" class="container-fluid mt-0" style="padding-left: 0px; padding-right: 0px;">
<div id="page-content" class="row">
<div id="region-main-box" class="col-12">
<section id="region-main" class="col-12">
<div id="login__banner">
<img id="login__banner-logo" src="assets/lms_logo_aquanas.png">
</div>
<span class="notifications" id="user-notifications"></span>
<div role="main"><span id="maincontent"></span>
<div class="my-1 my-sm-5"></div>
<div class="row justify-content-center">
<div class="login__container" style="margin-top: 130px;">
<div class="card">
<div class="card-block login-card-block">
<div class="card-title text-xs-center">
<!-- <div id="login__moodle-logo" style="height: 70px;">
<h2 class="text-center"></h2>
</div>-->
<!--<div id="login__avatar-container" style="display: none;">
<img src="assets/no_profile_img.jpg">
</div>-->
</div>
<div class="row justify-content-md-center">
<div class="col-md-10">
<form class="mt-3" action="https://192.168.50.20/moodle/login/index.php" method="post" id="login" name="login">
<div class="form-group">
<label for="username" class="sr-only">
Username
</label>
<input name="username" id="username" class="form-control" placeholder="Student Number / Staff Username" type="text">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input name="password" id="password" value="" class="form-control" placeholder="Password" type="password">
</div>
<button type="submit" class="btn btn-primary btn-block mt-3" id="loginbtn">Log in
</button>
</form>
</div>
<div class="col-md-10">
<div class="forgetpass mt-3">
<p><a href="https://192.168.50.20/login/forgot_password.php">Forgotten
your username or password?</a></p>
</div>
<!--<div id="login__support-container">
<a class="login__support login__student-support" href="http://***" target="_blank" style="text-align: center;"><img src="asset$
<a class="login__support login__student-support" href="http://***" target="_blank" style="text-align: center;"><img src="asset$
</div>-->
<!--<div id="login__support-container">
<a class="login__support login__student-support"
href="#"
target="_blank"><img
src="assets/support-icon.png"><span
class="login__support-text">Student Support</span></a>
<a class="login__support login__staff-support"
href="#"
target="_blank"><img
src="assets/academic-icon.png"><span
class="login__support-text">Staff Support</span></a>
</div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div>
<p style="text-align: center; font-size: 10px">Powered by <a href="http://www.moodle.org" target="_blank"><img id="moodle" src="assets/moodlelogo.png" style="height: 20px; vertical-align:$
<p style="text-align: center; font-size: 10px"></p>
</div>
<div id="yui3-css-stamp" style="position: absolute !important; visibility: hidden !important" class=""></div>
<script type="text/javascript" src="assets/require.js"></script>
</body>
</html>
I am creating a qr-code generator program with PHP, and I am using a library called qr-code. I have gotten to the point where I have successfully gotten the string the user wishes to convert into a qrcode, at the point to generate the qrcode I get the following error :
Uncaught Error: Call to a member function getContentType() on null in index.php:13 Stack trace: #0 {main} thrown in index.php on line 13
I have been at this for a while now, and I am stuck. There is really now in-depth documentation for the library in question, Please help me out. Here is my code :
<?php
require __DIR__ . '/vendor/autoload.php';
use Endroid\QrCode\QrCode;
// Get url from form
if (isset($_GET['submit'])) {
$url = strval($_GET['url']);
echo gettype($url);
$qrcode = new QrCode("$url");
echo "</br>";
header('Contert-Type: application/' . $qrCode->getContentType());
$createCode = $qrCode->writeString();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<title>QR Code Generator</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="./bootstrap.min.css" />
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-danger fixed-top">
<a class="navbar-brand text-center" href="#">QR Code Generator</a>
</nav>
<main role="main" class="container">
<div class="starter-template">
<form method="GET" action="<? htmlspecialchars($_SERVER['PHP_SELF']);?>">
<div class="form-group">
<label for="url">URL</label>
<input type="text" class="form-control" id="url" name="url" />
</div>
<button type="submit" name="submit" class="btn btn-danger">Generate</button>
</form>
<div class="d-flex justify-content-center mt-5">
<div
class="starter-template card text-white bg-danger mb-3"
style="max-width: 20rem;"
>
<div class="card-body">
<p class="card-text">
<?php echo $createCode;?>
</p>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
Here is a link to the library
You are trying to use $qrCode which does not exist, look at your code carefully:
$qrcode = new QrCode("$url");
echo "</br>";
header('Contert-Type: application/' . $qrCode->getContentType());
$createCode = $qrCode->writeString();
First you use $qrcode then you use $qrCode (which does not exist).
Change the first line to:
$qrCode = new QrCode("$url");
I am new to PHP and bootstrap. I am making a login form which was perfectly fine when I do not put <link rel="stylesheet" type="text/css" href="styles.css"> in my header.
But I can't just remove them from my header because I will need them at a later time because of some custom buttons, etc.
Take a look at this snippet below. As you can see, there is a white space when I already indicated the mt-5. Any idea what caused this and how to resolve this? Thanks in advance!
[![enter image description here][1]][1]
.index-banner {
background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 40, 0.5)), url(images/1.jpg) no-repeat center center fixed;
background-size: cover;
}
.primary-container {
padding-top: 150px;
padding-left: 50px;
transition: all 4s ease-in-out;
line-height: 10px;
}
<?php require_once 'indexheader.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Leafnote | Register</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black">
<h5 class="text-center py-2 font-weight-bold">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
Login
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Provide utilities classes which will be realy handy and reduce you extra css like adding padding or margin and many more..
where ever if you need to add or remove margin you can add class, same way you can work with padding
mb-0 , mb-10
You can get more info
Bootstrap Utilities
The whitespace is actually coming from a margin-bottom in your card-title class and padding from your card-body class which is defaultly available in bootstrap cards. Simply add this to your css file to overwrite the bootstrap css
.card-title {
margin-bottom: 0 !important;
}
.card-body {
padding-top: 0 !important;
}
Add this to your stylesheet i.e. style.css
.card-body{
padding: 0 24px;
}
.card-title{
margin:0
}
No need of extra css as there are Bootstrap4 classes to remove your extra padding and margin. You can use mb-0 to remove your margin-bottom. You can learn more about Spacing in Bootstrap 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black mb-0">
<h5 class="text-center py-2 font-weight-bold mb-0">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
Login
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="search">
<input type="text" id="search" placeholder="search...."/>
<input type="button" value="search" id="serbut"onclick="goto();"/>
</div>
strong text
my div tag contends are not arranging properly ...here i m getting different output that u wont expect ..input box at one side ...button at another side...
even not after line ...please help me how to arrange div elements ...from this situation i m aligning elements using margin property ...so many div tags are overlapped ....
this might be helpful,use bootstrap Search instead of regular search.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<style>
#imaginary_container{
margin-top:20%; /* Don't copy this */
}
.stylish-input-group .input-group-addon{
background: white !important;
}
.stylish-input-group .form-control{
border-right:0;
box-shadow:0 0 0;
border-color:#ccc;
}
.stylish-input-group button{
border:0;
background:transparent;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div id="imaginary_container">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>