I need some help with Bootstrap 3. My menu toggle is not working: when I resize the browser the menu is not hiding and so when I click the toggle button nothing happens.
and I also want to align my small background with the menu.
<!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">
<title>EGT DESIGN</title>
<meta name="viewport" content="width=device-width, inital-scale=1,maximum-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="css/custom.less" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- FAVICON -->
<link rel="icon" href="images/EGTico.ico" type="image/ico" sizes="16x16">
<!-- 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<nav class="navbar-inverse navbar-static-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-
collapse">
<span class="sr only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/egtdesign-logo.png">EGT DESIGN
</div>
<div class="collapse navbar-collapse navbar-right" id="nav-collapse">
<ul class="nav navbar-nav " >
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>
HOME</a></li>
<li><a href="portfolio.html"><span class="glyphicon glyphicon-book"></span>
PORTFOLIO</a></li>
<li><a href="" data-toggle="modal" data-target="#modal-contact-form"><span
class="glyphicon glyphicon-envelope"></span> CONTACT</a>
</li>
<!--SOCIAL MEDIA -->
<li><a href="http://www.facebook.com"><img src="images/facebook_ico.png"
alt="Facebook"></a></li>
<li><img src="images/twitter_ico.png"></li>
<li><img src="images/google plus.png"></li>
<li><img src="images/Linkdin_ico.png">
</li>
</ul>
</div><!--END MENU collapse-->
</div><!--END OF CONTAINER-->
</nav>
and here's the code for the image to be aligned:
<div class="container">
<div class="bg-pattern">
<img src="images/BG w pattern 1.png"/>
</div>
<div class="bg-line1">
<img src="images/line w shine 1.png" >
</div>
<!--IMAGE CONTENT-->
<div class="row">
<div class="bg-container">
<div class="col-lg-12">
<img class="img-responsive center-block" src="images/winning logo.png" >
<p class="text-center"><a href="#">Logo Design<span class="glyphicon glyphicon-chevron-
right"></span></a></p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="images/brochure.png">
<p class="text-center"><a href="#">Brochure Design<span class="glyphicon glyphicon-
chevron-right"></span></a></p>
</div>
<!--CLEAR-->
<div class="clearfix visible-xs-block"></div>
div class="col-lg-4">
<img src="images/Label.png">
<p class="text-center"><a href="#">Label Design<span class="glyphicon glyphicon-
chevron-right"></span></a></p>
</div>
<div class="col-lg-4">
<img src="images/otherportfolio.png">
<p class="text-center"><a href="#" class="img-otherport">Other portfolio Design<span
class="glyphicon glyphicon-chevron-right"></span></a></p>
</div>
</div>
</div>
</div><!--END OF CONTAINER-->
.bg-container{
margin-top:-5px;
background: url(../images/ContentBG.png);
}
.bg-line1{
margin-top: 0px;
padding-top:0px;
}
.bg-pattern-line2{
margin-left:-15px;
padding-top:610px;
}
thanks.
and here's some scripts, i forgot to include.
The different menu style is managed by javascript, specifically a jQuery plugin (collapse.js) your HTML structure is flawed from what i can see:
no head tag closure
no body tags
And of course no where in your code (snippets that you posted) have you included the necessary javascript files.
Related
I have Blazor Server-side application and I am now testing it on android and ios phones.
I have noticed that the header of the website is not displayed as it does on my desktop.
Here is how my Header looks on my Desktop:
and here is how it looks on my android and ios devices:
Here is my MainLayout.razor code:
#inherits LayoutComponentBase
<div class="main">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU"
width="120"
height="95" />
<div class="container">
<a class="navbar-brand" asp-area="" href=".">EEXI</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" href="/About">About</a>
</li>
</ul>
</div>
<div class="dropdown-menu-left">
<img src="https://i.imgur.com/yBzRXgu.png" title="Admin" />
</div>
</div>
</nav>
<div class="content px-4">
#Body
</div>
<footer class="no-print">
<div class="no-print">
<hr />
<p>© 2022 - Dromon Bureau of Shipping - Privacy Policy</p>
</div>
</footer>
</div>
Here is my Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EEXI Calculator</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/JS/JavaScript1.js"></script>
<script src="~/jquery/jquery.js"></script>
<script>
// When the user clicks the button, the page scrolls to the top
function OnScrollEvent() {
document.documentElement.scrollheight = 0;
}
</script>
</body>
</html>
I notice here that there is a menu on my header and I don't know where that comes from. And the button About is missing. And the general view is out of order.
Questions:
Can I make my view the same as the desktop one?
If not, what could I do to make it work?
I have noticed that if I switch on Desktop view from my Andoird (iOS does not switch) everything looks normal. Is there anything I can do to force my app to run on Desktop view all the time? (most optimal solution since it also fixes other minor issues)
Try not using navbar and use just nav:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<!--Replace with your logo-->
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
See bootstrap doc
Regarding Questions 3:
I have removed this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
from Host.cshtml and the app opens as a Desktop view only.
I copied the menu example provided from the Sementic UI website into Visual Studio Code and tried running it as it is, but JS doesn't work.
As described on the website, the sidebar should appear when you click the menu button.
css, jQuery, sementic.min.js are all set through CDN. I entered the JS Code from the Console in Chrome DevTools, but it says'Uncaught TypeError: $(...).sidebar is not a function at :2:3'.
$('.context.example .ui.sidebar')
.sidebar({
context: $('.context.example .bottom.segment'),
})
.sidebar('attach events', '.context.example .menu .item');
<!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" />
<title>Semantic UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/main.js"></script>
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>
$('.context.example .ui.sidebar')
.sidebar({
context: $('.context.example .bottom.segment'),
})
.sidebar('attach events', '.context.example .menu .item');
Remove .context.example from the script then it will work. But you may see another problem, the main application segment creates unknown padding with respect to the sidebar menu.
$('.ui.sidebar')
.sidebar({
context: $('.bottom.segment'),
})
.sidebar('attach events', '.menu .item');
<!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" />
<title>Semantic UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/main.js"></script>
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>
To remove this unnecessary padding from the application segment i will suggest to change <div class="ui inverted labeled icon left inline vertical sidebar menu"> to <div class="ui inverted left vertical sidebar menu">
$('.ui.sidebar')
.sidebar({
context: $('.bottom.segment'),
})
.sidebar('attach events', '.menu .item');
<!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" />
<title>Semantic UI</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/main.js"></script>
</head>
<body>
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted left vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</body>
</html>
NB: You should use your script tag in the bottom section of your code. Avoid initiating script in the head section.
<!DOCTYPE html>
<html lang="en">
<head>
............
</head>
<body>
............
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>
I'm using Brackets text editor and everything's working great (runs the same through Brackets as it does with Codepen) apart from one thing:
I'm using a CSS media query to set a breakpoint so I only have one column in a at max-width 537px.
#media (max-width: 537px) {
.custom-column {
width: 100%;
}
}
<div class="col-sm-4 col-xs-6 custom-column">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
For some reason it works in Codepen but not when I run my text editor in Chrome. Is it something to do with my 'head' element maybe?
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
and here's the codepen: [http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100][1]
I solved this issue. I also had this issue with Mozzilla, and I fixed it by commending your bootstrap cdn link and using my bootstrap link.
I understood it, because as it worked with code pen, I thought it may be connected to the stylesheet bootstrap cdn not loading.
This is the bootstrap cdn I am using, I include it in my header tags:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
This is the rest of my my working code:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
</body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Simmo Simpson Web Design</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li><a href="#contact" >Contact</a></li>
</ul>
</div>
</nav>
<div id="about" class="container-fluid">
<div class="row">
<div class="col-xs-5 custom-about">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face" width="100%">
</div>
<div class="col-xs-7 custom-about">
<h1>Simmo Simpson</h1>
<h4>Freelance Web Design & Photography<br><br>
Feel free to take a look at my work</h4>
</div>
</div>
<section class="container-fluid" id="portfolio">
<h1>PORTFOLIO</h1>
<div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
</div>
</section>
</div>
<h1 id="contact">CONTACT ME</h1>
<div>
<P style="padding-left:5%" class="text-right">Need a website? Some quality photography?<br><br>Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br>
Want some advice to become more productive?<br><br>Check out my blog by clicking the W icon.<br><br>
</P>
</div>
<div class="footer-social-icons">
<ul class="social-icons custom-social-icon">
<li> <i class="fa fa-facebook custom-social-icon"></i></li>
<li> <i class="fa fa-twitter custom-social-icon"></i></li>
<li> <i class="fa fa-linkedin custom-social-icon"></i></li>
<li> <i class="fa fa-instagram custom-social-icon"></i></li>
<li> <i class="fa fa-wordpress custom-social-icon"></i></li>
<li> <i class="fa fa-github"></i></li>
</ul>
<br>
</div>
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<title> MyBLOG </title>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap_costumize.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="css/js/bootstrap.js"></script>
<script src="css/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navbar-brand"> This is a Logo </div>
</div>
<ul class="nav navbar-nav pull-right" >
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</nav>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="img">
<img src="img/blog_picture_1.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_2.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_1.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_2.jpg" />
</div>
</div>
</div>
</body>
</html>
this is the php code and this display the image top to bottom how can i display the images inline like from left to right?
im struggling also how to connect css selector in img and div hehe can sum1 pls elaborate the methods shoud i do thank you :)
Since your images are all wrapped in divs with .img class, write the following in your CSS.
.img { display: inline; }
Currently I have my website looking like this.
http://imgur.com/jS1vEKq
Here's the html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="fileToUpload" name="fileToUpload">
<button ng-click="add()">Upload</button>
</div>
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I was wondering how I would move image elements just a few pixels lower so that they aren't right against the upload button? And I know that the way I've placed the images in bootstrap must be completely wrong and awful. I'm still a noob to web dev so I simply looked at someone else's code and made it fit to my needs.
Try a < br> (Without Space) it will break one line ;)
I saw this answer was given already, sorry
You can add a margin to your .data-image class
.data-image {
margin: 10px 0px;
}
Well theres a few ways you could do this firstly (kinda cheaty) just use simple <br> tags like so...
<br><br> <--- right here
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
you can add it in before or after the row tag i think but try this