I'm doing a site with bootstrap style but i have a doubt about grid system. I have the follow structure:
(Inside the 'form-group' div I need to put a label for my combobox and under it a plus icon and my combobox).
<div class="row" style="padding-left: 15px;">
<div class="form-group col-md-3">
<label class="form-label">Label</label><br>
<?php
echo $this->Html->link('<i data-toggle="tooltip" data-placement="right" title="Click here" style="cursor: pointer;font-size: 18px;" class="fa fa-plus-circle"></i>',
'#',
array(
'data-toggle'=> 'modal',
'data-target' => '#OpenModal',
'escape' => false
)
);
?>
<select></select>
</div>
</div>
But if I code this way, my form be like:
you need to increase col width col-md-3 to col-md-4 or more so that it could contains icon and input or you will need to overwrite col-md-3 by removing margin and padding
this what you want to do
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row" style="padding-left: 15px;">
<div class="form-group col-md-3">
<label class="form-label">Label</label><br>
<i data-toggle="tooltip" data-placement="right" title="Click here" style="cursor: pointer;font-size: 18px;" class="fa fa-plus-circle"></i>
<select></select>
</div>
</div>
</body>
</html>
Related
I'm making some php page : file_header.php, file_footer.php, file_index.php, and I load them all in the browser one by one, and the result is fine (as i want). But, the problem appears when i combine file_header.php and file_footer.php in file_index.php.
Here is the problem : there are two buttons in page file_header.php (these are bootstrap button), and i give my custom style to them, i want the buttons looks slim, so i give margin and padding attribute in the css style, and finally i load file_header.php in the browser normally (result is fine / as i want). But, when i combine file_header.php and file_footer.php in file_index.php these two buttons turns into the original bootstrap button (buttons looks fat).
why did it happen ?
<!-- This is file_header.php -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
</body>
</html>
<!-- This is file_footer.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Page Title</title>
<style>
footer{
background-color: #f4f4f4;
}
.container{
padding: 20px;
}
</style>
</head>
<body>
<footer>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Service</h5>
<div class="row">
<div class="col">
<p>About Us</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Success Story</h5>
<div class="row">
<div class="col">
<p>Let Me See</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Help</h5>
<div class="row">
<div class="col">
<p>Terms and Condition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<!-- This is file_index.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<?php include 'file_header.php' ?>
<div>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
</div>
<?php include 'file_footer.php' ?>
</body>
</html>
I expected the style of every buttons element in the page file_index.php is fine (buttons looks slim / as i want).
OR
I expected the style of every page (file_header, file_footer, file_index) doesn't change at all
When you combine the header, main and footer in the index file, you need to make sure that you have everything just once. Meaning, the doctype, the style, the opening body tag, etc.
So, I'd restructure a little bit your code, your 'file_header' should contain all what's in the <head>, I'd create a separate 'file_nav.php' where your navigation code sits, remove all the wrapping content from the 'file_footer' and leave there only the footer code.
Somehow like this:
<!-- This is file_header.php -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
footer{
background-color: #f4f4f4;
}
.container{
padding: 20px;
}
</style>
</head>
<!-- This is file_nav.php -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
<!-- This is file_footer.php -->
<footer>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Service</h5>
<div class="row">
<div class="col">
<p>About Us</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Success Story</h5>
<div class="row">
<div class="col">
<p>Let Me See</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Help</h5>
<div class="row">
<div class="col">
<p>Terms and Condition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- This is file_index.php -->
<!doctype html>
<html lang="en">
<?php include 'file_header.php' ?>
<body>
<?php include 'file_nav.php' ?>
<div>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
</div>
<?php include 'file_footer.php' ?>
</body>
</html>
Your file_header.php and file_footer.php are entire HTML page structures. They should be partials of just the HTML markup you want to include in the place they are PHP "include"ed.
An example of file_header.php without the doctype, head, html tag, or body:
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
The reason your styles are being overridden when file_footer.php is included is because you are again for the second time including the bootstrap CSS in a <link /> tag. Part of the cascading in CSS is that the last declared rule takes priority and so the second inclusion overrides your custom styles.
You should include your bootstrap <link /> tag in your file_index.php head only.
using: php7.2.7, win10, laravel5.6
login.blade.php already had #extends and #section so I went straight ahead to make a login form.
login.blade.php code:
#extends('layouts.app')
#section('content')
<div class="columns">
<div class="column">
<div class="card">
<div class="card-content">
<h1 class="title">Login</h1>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="text" name="email" id="email" placeholder="name#example.com">
</p>
</div>
<div class="field">
<label for="password" class="label">password</label>
<p class="control">
<input type="text" name="password" id="password" placeholder="name#example.com">
</p>
</div>
</div>
</div>
</div>
</div>
#stop
app.blade.php code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'forum') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="navbar is-fixed-top has-shadow">
<div class="container">
<div class="navbar-start is-fixed-top">
<a class="navbar-item" href=" {{route('home')}} ">
<img src=" {{asset('images/bulma-logo.png')}} " style="height: 30px; width:auto;" alt="FORUM LOGO">
</a>
Learn
Discuss
Share
</div>
<div class="navbar-end is-fixed-top" style="overflow: visible;">
#if (Auth::guest())
Login
Register
#else
<div class="navbar-menu">
<div class="navbar-end">
<b-dropdown v-model="navigation" position="is-bottom-left">
<a class="navbar-item" slot="trigger">
<span>Profile</span>
<b-icon icon="menu-down"></b-icon>
</a>
<b-dropdown-item custom>
Logged in as <b>Vidan Stosic</b>
</b-dropdown-item>
<hr class="dropdown-divider">
<b-dropdown-item value="home">
<b-icon icon="home"></b-icon>
Home
</b-dropdown-item>
<b-dropdown-item value="products">
<b-icon icon="cart"></b-icon>
Products
</b-dropdown-item>
<b-dropdown-item value="blog" disabled>
<b-icon icon="book-open"></b-icon>
Blog
</b-dropdown-item>
<hr class="dropdown-divider">
<b-dropdown-item value="settings">
<b-icon icon="settings"></b-icon>
Settings
</b-dropdown-item>
<b-dropdown-item value="logout">
<b-icon icon="logout"></b-icon>
Logout
</b-dropdown-item>
</b-dropdown>
</div>
</div>
</nav>
</template>
#endif
#yield('content')
</div>
<script src=" {{asset('js/app.js') }} "></script>
</body>
</html>
The problem is, everything is rendering to the RIGHT side, not below.
add two closing because you open 6 but close only 4 so just add it and check.
i want to show rating of each item or name of company with company name (driven from another table in database) in "li" tag of html (transporters.php). I have got the rating for each company page individually (transporters2.php) but i want to get all the ratings of all the companies or items in "li" tab so user can overview it and after clicking an "li" item it will show the profile of company "transporters2.php". Here are my two files transporters.php and transporters2.php and also their snapshots.
transporters.php and transporters2.php ,Mydatabase
Note: Both files are working correctly there is no syntax error, if an error occurs that might be occurred while posting the question thanks.
Transporters.php
<?php
include "header.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="../js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/rating.css" />
<script type="text/javascript" src="../js/rating.js"></script><title>Transporters</title>
<!-- Bootstrap Core CSS -->
<link href="file:///C|/xampp/htdocs/bin/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="file:///C|/xampp/htdocs/bin/css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="file:///C|/xampp/htdocs/bin/font-awesome/css/font
awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="../css/example.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Transporters
<small> Companies</small>
</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Transporters</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12"><?php
require("Config.php");
$sql =mysql_query("SELECT * FROM transporters");
?>
<ul style="list-style:none;">
<?php while($row=mysql_fetch_array($sql) )
{
$cid=$row['CompanyID'];
?>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<li><div class="product" style="font: 10px verdana, sans-serif;margin: 0 auto 40px auto;width: 71px;height: 4px;margin-right: 75%;">
<div id="<?php echo $cid ?>" class="ratings" style="border: 1px solid #CCC;overflow: visible;padding: 10px;position: relative;width: 182px;height: 47px;float: left;margin-left: -195px;"><div class="star_1 ratings_stars ratings_vote"></div><div class="star_2 ratings_stars ratings_vote"></div><div class="star_3 ratings_stars ratings_vote"></div><div class="star_4 ratings_stars ratings_blank"></div><div class="star_5 ratings_stars ratings_blank"></div>
</div>
<a href='transporters2.php?CompanyID=<?php echo $cid;?>'><?php print $row['CompanyName']; ?>
</a></div>
</li>
</div>
</div>
</div>
<?php
}//end of while loop
?>
</ul>
</div>
</div>
<script>
function sendcompanyname()
{
var x= document.getElementById("cpn").value;
}
</script>
</body></html>
Transporters2.php
<?php
$db=mysqli_connect("localhost","root","","db1") or die("unable to connect");
include("header.php");
$cname;
if(isset($_GET['CompanyID'])){
$CompanyID = $_GET['CompanyID'];
$get_name= "SELECT * from `transporters` where `CompanyID`='$CompanyID'";
$run_name= mysqli_query($db,$get_name);
while($row_name=mysqli_fetch_array($run_name)){
$cname = $row_name['CompanyName'];}
}
include("settings.php");
connect();
$ids=array(1);
?>
<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/rating.css" />
<!--<script type="text/javascript" src="../js/rating.js"></script>-->
<script>
$(document).ready(function() {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function(){
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
//send ajax request to rate.php
$('.ratings_stars').bind('click', function(){
var id=$(this).parent().attr("id");
var num=$(this).attr("class");
var poststr="id="+id+"&stars="+num;
$.ajax({url:"../bin/rate.php",cache:0,data:poststr,success:function(result){
document.getElementById(id).innerHTML=result;}
});
});
});
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- /.row -->
<div class="row">
<?php
for($i=0;$i<count($ids);$i++)
{
$rating_tableName = 'ratings';
$id=$CompanyID;
$q="SELECT total_votes, total_value FROM $rating_tableName WHERE id=$id";
$r=mysql_query($q);
if(!$r) echo mysql_error();
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
$id=$CompanyID;
$j=$id;
echo'<div class="product">
Rate Item '.$j.'
<div id="rating_'.$id.'" class="ratings">';
for($k=1;$k<6;$k++){
if($rat+1>$k)$class="star_".$k."ratings_stars ratings_vote";
else $class="star_".$k." ratings_stars ratings_blank";
echo '<div class="'.$class.'"></div>';
}
echo' <div class="total_votes"><p class="voted"> Rating
<strong>'.#number_format($rat).'</strong>/5 ('.$v. 'vote(s) cast)
</div>
</div></div>';}
?>
<div class="col-lg-12">
<h2 class="page-header"><?php echo $cname;?></h2>
</div>
<!--<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show Drivers</h4>
<p>Show drivers of this company.</p>
<button id="popup" onclick="div_show()" class="btn btn
primary">Add</button>
</div>
</div>
</div>-->
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show routes</h4>
<p>check which routes are following this company...</p>
<a href="routes.php?CompanyID=<?php echo $CompanyID;?>" class="btn btn
primary">show routes</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Schedule</h4>
<p>Check the timings of journey.</p>
Show Schedule
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show Drivers Positions</h4>
<p>Check the positions of all drivers.</p>
<a href="positions.php" class="btn btn-primary">Show Drivers
Positions</a>
</div>
</div>
</div>
</div>
</div>
<!---END Page Content-->
</body>
</html>
i am new to php framework and bootstrap working on CodeIgnitor 3.0.
I have simple navigation bar for signup and login clicking on login redirects to another page where is another login button clicking on which should open the popup
login form but it's not working??
//my nav bar
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<style>
body {
padding-top: 0px;
}
#media (max-width: 1000px) {
body {
padding-top: 0px;
}
}
</style>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">SignUp</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
//login.php in views folder
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" href="#myModal" >Login</a>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
</div>
</div>
What should i do if i want that login page to popup on homepage???
You have a couple of issues that you need to correct. To get the modal working you need to remove the hide class on the modal.
<div class="modal hide" id="myModal">
should be
<div class="modal" id="myModal">
Also, the hyperlink should have data-target (not href). So
<a class="btn btn-primary" data-toggle="modal" href="#myModal">Login</a>
should be
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>
These changes should get the modal running, but there are other corrections you need to do
In both your files you are loading bootstap, jquery and then bootstrap again. You only need to load bootstrap once and it should be after the jQuery, So
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
should be
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
Here is the complete //login.php that should work (I've added body and title tags for completeness and closed the html tag)
I've also replaced the script and css with CDN versions to take out any problems with your local js files. Do swap them back once you get it working.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta name="robots" content="NOODP"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</a>
<div class="modal" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
</div>
</div>
</body>
I am trying to create a Very simple and basic Image gallery using Twitter Bootstrap responsive design.
The images are rendered dynamically. The first row of images are adjusting good but from second row the alignment varies.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link href="<?=base_url()?>assets/css/bootstrap.css" rel="stylesheet">
<link href="<?=base_url()?>assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class = "span12">
<?php
for($i=0; $i<10 ;$i++)
{
?>
<div class = "span3">
<a href="#" class="thumbnail">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style = "border:solid 2px red;"/>
</a>
</div>
<?php
}
?>
</div>
</div>
</div>
</body>
</html>
How can I align the span's exactly, so that it looks like a perfect gallery like structure.
I don't want to use any plugin here or jQuery.
Use a row instead of row-fluid..
<div class="container">
<div class="row">
<div class="span3">
<a href="#" class="thumbnail">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style="border:solid 2px red;">
</a>
</div>
...
</div>
</div>
Demo: http://bootply.com/69509
Did you try to add a new <div class="row-fluid"> ... </div> every four images ?