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 ?
Related
I'm trying to center my div content responsively with a sidebar menu and a top menu using bootstrap. But my div content is placed at the bottom of my page when I require the side-menu file and I don't know why. I'm not using any CSS file, just Bootstrap 5.2, but if your solution requires CSS that's okay.
INDEX
<!DOCTYPE html>
<html lang="pt">
<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">
<title>TESTE</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo $base_url . 'assets/css/bootstrap.min.css'; ?>">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="<?php echo $base_url . 'assets/css/all.min.css'; ?>">
</head>
<body>
<!-- NAVIGATION -->
<?php require 'application/views/menu/side-menu.php'; ?>
<div class="container justify-content-center">
<!-- AGENDAMENTOS -->
<div class="row mt-5 me-4">
<div class="col-md-12 offset-md-auto">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-calendar-days"></i> TO DO - 27 </h4>
</div>
</div>
</div>
</div>
<!-- end agendamentos -->
<!-- FEITOS -->
<div class="row mt-5">
<div class="col-md-12 offset-md-auto">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-check"></i> DONE - 27 </h4>
</div>
</div>
</div>
</div>
<!-- end feitos -->
</div>
<!-- Bootstrap Bundle JS -->
<script src="<?php echo $base_url . 'assets/js/bootstrap.bundle.min.js'; ?>"></script>
<!-- Fontawesome JS -->
<script src="<?php echo $base_url . 'assets/js/all.min.js'; ?>"></script>
</body>
</html>
SIDE MENU
<div class="d-inline-block">
<nav class="bg-dark text-white" style="max-height: 100%; height: 100vw; max-width: 10vw;">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
</nav>
</div>
This is what it was supposed to look like, but with the sidebar:
And this is what happens when I require my sidebar file:
I tried using position-absolute and d-inline-block, which resulted on other pages, but this isn't working on this one
Bootstrap is build on/with Flexbox. So a good solution for you is to use their Flex Utility classes to make the layout.
Explaining the solution
When dealing with elements that should stretch the entire viewport height it's good practice to set a min-height of 100vh to html and body.
Note in the CSS I also added min-height: -webkit-fill-available. They are commented out because they don't work in the iFrame, at least for me they don't. I recommend removing the comment block if you use this code; they're useful because Safari (iOS mostly) handles 100vh a little different than the other browsers which can cause some issues.
I then made the body a flex container so its direct children elements (flex items) will stack horizontally (by default). I used the class d-md-flex so all elements will stack vertically below the medium break point. Use d-flex if you want your sidebar to always stick to the left.
If you don't want body to be flex, a 'wrapper' <div class="d-md-flex">...</div> that spans all the (necessary) elements is a good alternative. Just add the CSS for it, setting it to height: 100%; or 100vh.
Speaking of sidebar; making it flex will now make it stretch the whole viewport, since it's a flex item of a flex container (body) that has a height of 100vh.
And that's it. Snippet is best viewed using the full page option.
html {
/*min-height: -webkit-fill-available;*/
}
body {
height: 100vh;
/*height: -webkit-fill-available;*/
max-height: 100vh;
overflow: auto;
}
<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://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!DOCTYPE html>
<html lang="pt">
<head></head>
<body class="d-md-flex">
<!-- SIDEBAR -->
<nav class="d-flex flex-row flex-column flex-shrink-0 p-3 text-bg-dark" style="min-width: 10vw;">
hello
</nav>
<!-- END SIDEBAR -->
<!-- MAIN -->
<main class="container">
<div class="row mt-5 row-cols-1 row-cols-md-3 g-4 justify-content-center">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-calendar-days"></i> TO DO - 27 </h4>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-check"></i> DONE - 27</h4>
</div>
</div>
</div>
</div>
</main>
<!-- END MAIN -->
</body>
</html>
Your card layout
I changed your two cards layout to make it easier to control how they behave, using row columns and the gap g-* utility class. It has no effect on how the sidebar behaves, so if it's of no use; just ignore it.
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.
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>
I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.
I started doing my school project and learning bootstrap basics but i have one problem with php code. I dont know how to delete this row in code.
http://imgur.com/LP0U9CK (or see below)
That red box.
As you can see in properties there is " ". When i delete it, row disappear. My index.php :
http://pastebin.com/K9GEF5mb (or see below):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ryby.sk</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
</head>
<body>
<div id="kontajner">
<?php
include("header.php");
?>
<div id="body">
<div class= "container" >
<div class="jumbotron" id="na_stred">
<h1>Vitajte na stránke www.ryby.sk</h1>
<p>Stránka je hlavne zameraná na informácie o sladkovodných rýbach.</p>
</div>
</div>
<div class= "container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h2> Akvaristika </h2>
</div>
<p> gvfdgsdfghsf ghhfg hd gdgsdfghsf ghhfg hd gdgsdfghsf ghhfg hd gdgsdfghsf ghhfg hd gdgsdfghsf ghhfg hd gdgsdfghsf ghhfg hd g</p>
<p> Zdroj: lblablalb </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="navbar-inverse navbar-default navbar-bottom footer">
<div class="container">
<p class="navbar-text pull-left">Bezo production</p>
<a href="#contact" class=" navbar-btn btn-primary btn-lg disabled btn-sm pull-right" data-toggle="modal" role="button" >Napíšte nám</a>
</div>
</div>
</div>
</div>
</body>
</html>
Everything is OK, but when I add include("header.php"); than this row appears. Can you help me please? I am solving this problem for one week :(
There are two sources for the whitespace in your code. I have indicated them with XXX, and the one newline is indicated by Y in index.php.
In index.php:
<div id="kontajner">
XXXXXXXXXXXXXXXXXXXXXXXX<?php
include("header.php");
?>Y
XXXXXXXXXXXXXXXXXXXXXXXX<div id="body">
And in header.php:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<div class = "navbar navbar-inverse navbar-static-top">
You should keep in mind though, that whitespace does not matter in HTML.
UPDATE:
As #hanzo2001 points out, it's possible to include code as follows:
<div><?php echo "Hello!"; ?></div>
Or to demonstrate the principle more extremely:
<div><?php
if (1==1)
{
echo "Hello!";
}
?></div>
Both of which will render as:
<div>Hello!</div>