<!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; }
Related
I would like to put my button at the top right at the same height as the title.
Here is an example:
enter image description here
My result for now
enter image description here
I think I have a problem with my divs? The button does not want to be placed at the top right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
You can use rows and columns to keep content aligned in bootstrap. Rows have 12 columns so here I've used 10 columns for the heading and 2 columns for the button and aligned the button right.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<div class="row">
<div class="col-10 my-2">
<h2 class="text-start">Signalétique de SOLVAY BE (Euronext Brussels)</h2>
</div>
<div class="col-2 my-2 text-right">
<button type="button" (click)="goBack()" class="btn btn-primary">Retour</button>
</div>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</div>
</body>
</html>
You could use position:absolute or float:right to make it in the right corner:
button{
position: absolute;
right:20px;
top:90px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
or use float:right:
button{
float: right
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-start ps-3 pt-5 pb-3">Signalétique de SOLVAY BE (Euronext Brussels)</h1>
<button type="button" (click)="goBack()" class="btn btn-primary mb-2 mr-5 ">Retour</button>
<hr class="ms-2 mt-1 mb-5" style="width: 97%">
</div>
</body>
</html>
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>
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
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.