Sidebar doesn't work in Semantic UI. What should I do? - semantic-ui

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>

Related

How to place a button at the same height as a title to the right?

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>

Preventing Bootstrap button from filling flexbox

I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?
...
<div class="row pt-4" id="cards">
<div class="card-deck">
// THIS IS THE CARD WITH THE WIDENED BUTTON
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
// THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
<div class="card-body">
<h5 class="card-title">Spirituality</h5>
<p class="card-text">Connect to something larger than yourself</p>
Set a Goal
</div>
</div>
...
</div>
</div>
...
Here's what the buttons look like:

Just wrap your anchor in another div
<div>
Set a Goal
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
<div>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
OR
Just add align-items-center class on the flex div
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>

To you button class, add mx-auto to center the button and mt-auto to push the button at the bottom of the card.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row pt-4" id="cards">
<div class="card-deck">
<div class="card">
<img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">Giving Back</h5>
<p class="card-text">Help others and feel useful</p>
Set a Goal
</div>
</div>
</div>
</div>
</div>
</body>
</html>

media query working in Codepen but not though text editor/chrome

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>

how to display images inline using css in bootstrap?

<!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; }

Bootstrap menu toggle not working

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.

Resources