I want to create a row and 3 columns in that row. This is my code and the column doesn't work properly. It shows as row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class='row'>
<div class=' col-md-4'>
<p><small>Abc</small></p>
<p class='font-weight-bold'>Example</p>
</div>
<div class=' col-md-4'>
<p><small>Xyz</small></p>
<p class=' font-weight-bold'>New York</p>
</div>
<div class=' col-md-4'>
<a class=' btn btn-primary' style='margin-top: 15px;' role='button'>button</a>
</div>
</div>
</body>
</html>
Your code is correct! I just changed the Bootstrap version that you have been used to see 'col-4' style and see this works perfectly!
I guess maybe the screen that you are working with, is below '575px' resolution . this causes the responsive style.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class='row'>
<div class='col-4'>
<p><small>Abc</small></p>
<p class='font-weight-bold'>Example</p>
</div>
<div class='col-4'>
<p><small>Xyz</small></p>
<p class=' font-weight-bold'>New York</p>
</div>
<div class='col-4'>
<a class='btn btn-primary' style='margin-top: 15px;' role='button'>button</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
It works fine, actually, but you are setting your columns to respect only in a screen of medium size or larger.
col-md-4
If that was not your intention, you can either:
reduce the screen size you are working with: col-sm-4 (small), col-xs-4 (extra-small)
Or scrap the sizing and make your columns respect whatever screen size: col-4
More info on Bootstrap's grid system
Related
I am trying to get typed.js working on a test page
As per the documentation I added the script, I have tried also add jQuery but it still doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<title>Document</title>
</head>
<body>
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<div id="typed-strings">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<span class="typed-cursor"></span>
</body>
</html>
I want the animation to look similar to
what's shown in this Pinterest post.
I am unable to replicate as shown using the below starter script!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<p> file:</p>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" name="filename">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
</div>
</body>
</html>
I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<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>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks
I want to create a project with using colors.
All of my files are in the same folder.
I can't reach the my color input that is in the index.html by:
const firstColor = document.getElementById("color1").value;
I can just reach elements which is in the game.js.
Also my canvas is in the game.html.
I have added tags into all of my HTML files.
My index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body align="center">
<div id="title">Cyber Bird</div>
<div id="mainMenu">
<div id="selectColors">
<div id="colorsTitle">SELECT <span>2</span> COLORS FOR YOUR <span id="cb">CYBER BIRD</span></div> <br> <hr> <br>
<span id="first"> First: <input type="color" name="color1" id="color1" value="#f1aabc"></span>
<span id="second"> Second: <input type="color" name="color2" id="color2" value="#2d96b9"></span>
</div>
START
</div>
<script src="src/game.js"></script>
</body>
</html>
My game.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container" align="center">
<div id="scoreBoard">
<div id="header">SCOREBOARD</div>
<div id="description">Score: </div>
<div id="score">0</div>
</div>
<canvas id="myCanvas" height="500" width="900"></canvas>
<div class="helper" id="toJump">press <span>SPACE</span> to jump</div>
<div class="helper" id="toStart">click <span onclick="startGame()">HERE</span> to start</div>
<div class="helper" id="toSelect">select new <span>COLORS</span></div>
</div>
<div id="darken"></div>
<div id="gameOver" align="center">
<div id="message">GAME OVER</div>
<div id="yourScore">Your score is: <span id="finalScore"></span></div>
<div id="tryAgain" class="button" onclick="startGame()">Try Again</div>
</div>
<script src="game.js"></script>
</body>
</html>
You're not passing the data from your index.html to game.html. So when you call this:
START
You're loading a new page, which removes all of your existing variables - including 'color1'.
I see 2 options here:
Make this a single-page web app. So when you click your START button, it hides the index div and loads a game div
Save your values from index.html somewhere (browser storage?) and then call that after you load your new game.html page.
I am using fullPage.js for my website. I went to test it and it isn't functioning like it is supposed to and creating a full height page. I tried changing the scripts and links around, as well as using different jQuery Libraries. All the sources are 100% correct. Any leads or suggestions? Thank you.
<!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 http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap / CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
</head>
<body>
<div id="fullpage"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
library :: https://cdnjs.com/libraries/fullPage.js
so you have to change the src attribute of script file .
since you are using src of full page is jquery.fullPage.js but that is not valid .
use https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js in src attribute .
<!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 http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" />
</head>
<body>
<div id="wrapper"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Change id="wrapper" to id="fullpage"
Default structure looks like below:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>