I'm working on a site and my goal is to make it responsive by reducing the background associated by when the site is reduced.
I want the grey area to reduce simultaneously when the site is reduced horizontally.
How can I achieve this?
Here is my code so far. I'm using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="#CurrentPage.siteDescription">
<title>#CurrentPage.pageTitle|Gymnasiestudera</title>
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/fanoe.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- HTML5 shim and Respond.js for 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="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper col-md-12 col-lg-8 col-lg-offset-2">
<header>
<div class="row col-md-12">
<nav class="entry-links">
<ul>
<li class="">
För elever
</li>
<li>
För skolpersonal
</li>
<li>
Ungdom och elevdatabas
</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-xs-8 col-sm-12 col-md-4">
<a href="#home.Url">
<div class="brand" style="background-image:url('#(home.SiteLogo)?height=100&width=700&')"></div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 main-nav">
<nav id="cbp-hrmenu" class="meny cbp-hrmenu col-md-10 col-md-offset-1">
#{ Html.RenderPartial("MainNavigation"); }
</nav>
</div>
<br />
<br />
</div>
<div class="container-fluid">
<div class="container">
</div>
</div>
<div id="toggle" class="toggle">
<span></span>
</div>
</header>
#RenderBody()
<div class="foot-line-background">
<div class="foot"></div>
</div>
<footer class="field dark">
<div class="row">
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn2
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/scripts/fanoe.js"></script>
<script src="/scripts/Custom.js"></script>
</div>
</body>
</html>
If I'm understanding you correctly, you really just need to have a max-width on your "content container" to do the job. As the window width decreases, the gray area will also decrease until the container takes up the full window.
.my-container {
max-width: 800px;
}
http://jsfiddle.net/agentfitz/6s4u14yd/1/
Related
I am trying to center the content of a column using Bootstrap. This is my current code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I have tried using d-flex justify-content-center, as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4 d-flex justify-content-center" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But this is not working...
How can I do to put the elements correctly inside the column?
You can add “ align-items-center” to the class, if that still doesn’t work, make sure you’re not adding different margins to left and right of the section, but justify-content-center and align-items-center will work fine
Adding d-flex flex-column h-100 to the child, with an align-items-center solves the scenario.
For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!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://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
I need to make a full-page sized div background.
So I'm having these two columns: col-9 sized div in gray and col-3 div in blue color. Here's the code of the two cols:
#media print {
#page {
size: auto;
margin: 0;
}
}
<html>
<head>
<title>Test Full Page</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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9 h-100" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3 h-100" style="background-color:#0BA9FE;">
</div>
</div>
</div>
</body>
</html>
How do I make both div cols full-sized height on every page? like the first page, second and third page. These two divs won't fill the entire page even when I added the h-100 class.
Any help will be much appreciated.
Thank you
Remove h-100 from the class in div.
Refer working code https://jsfiddle.net/pallaviyadav/n3Lus0v7/8/
<html>
<head>
<title>Test Full Page</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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3" style="background-color:red;">
</div>
</div>
</div>
</body>
</html>
Goody day guys, i am trying create a page using bootstrap and interactjs, yes, I've heard about jQueryUI's draggable and droppable, but it's conflicts with the main jQuery file, is a bit annoying so i turned to interactjs, and it actually did what i wanted it to do per se, the problem is that i can't drag an element across two columns(sidebar to main panel), what happens when i try is that the element goes "Underneath" the other column/panel.
The code that's responsible for moving the element
This is the HTML code, the element starts at the element with the angular repeat directive (div... ng-repeat=...)
<!DOCTYPE html>
<html lang="en" ng-app="Drag-on IDE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Integrated Learning Object Development Environment">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Drag-on IDE</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-controller="LEQueryController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<div class="nav navbar-nav navbar-right">
<li><button class="btn btn-default btn-info">Upload a Learning Element</button></li>
<li><button class="btn btn-default btn-success">Upload Material</button></li>
</div>
<form class="navbar-form navbar-left" ng-submit="controller.query()">
<input class="form-control" placeholder="Search Learning Element..." type="text" ng-model="searchText">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--SIDE BAR-->
<div class="sidebar col-sm-4 col-md-3">
<div class="list-group nav nav-sidebar" >
<a href="#" class="list-group-item draggable" ng-repeat="result in results">
<span class="badge">{{result.type}}</span>
<span class="badge">{{result.size}}</span>
<h4>
{{result.title}}
<br /><small>{{result.author}}</small>
<br /><small>{{result.publishingDate}}</small>
</h4>
</a>
</ul>
</div>
</div>
<!--SIDE BAR END-->
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<div class="container" id="lo-workspace">
<div class="draggable jumbotron text-center">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
******* ******* ***** *******
* * * * * * *
* * * * * * *
* * * * * * *
* ******* ***** *******
TO : Alfonso
Draggable mechanism is acting like a *,
complaining something like "$(...).draggable isn't a function because i'm having my period today".
-->
<script type="text/javascript" src="node_modules/jquery/dist/jquery-1.9.1.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/interact.js/interact.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="utilities.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="ie10-viewport-bug-workaround.js"></script>
</body></html>
What causes this problem? how do i fix it? thanks.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have 2 different html files (located in the same directory). One file works perfectly for my menu. http://gyazo.com/3ee7c319ceb57bb1e91efb16cc93c28d
However, when I COPY AND PASTE the exact same code into the other html file, the menu looks like this: http://gyazo.com/ac9d43e9dcfada048dc206e735a6a5d0
Here is the code for the first (working) file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<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>Boxify: Free HTML5/CSS3 Template by Peter Finlan</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
Here is the code for the other file (that does not work):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{$title}</title>
<link rel="shortcut icon" href="{$url}/favicon.ico" />
<link href="{$url}/{$theme_path}/{$theme_name}/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.timeago.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/functions.js"></script>
<link rel="shortcut icon" href="../favicon.ico">
**<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">**
</head>
<body>
<div class="topbar">
<div class="header">
<a href="{$url}">
<div class="logo"></div>
<div class="logo-small"></div>
</a>
<div class="search-input">
<input type="text" id="search" placeholder="{$lng->search_for_people}">
</div>
<div class="search-container"></div>
<div class="container">
**<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>**
{$menu}
<div class="topbar_margin"></div>
{$content}
<div class="row-body">
<div class="footer">
<div class="footer-container">
<div class="footer-links">
{$lng->terms_of_use} -
{$lng->privacy_policy} -
{$lng->disclaimer} -
{$lng->developers} -
{$lng->contact} -
{$lng->about} -
{$lng->title_admin}
</div>
<div class="footer-languages">
{$lng->language}: {$language}
</div>
<div class="footer-languages">
Copyright © {$year} {$footer}. {$lng->all_rights_reserved}. {$powered_by}
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
have you tried using <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> in the files instead of <link href="css/bootstrap.min.css" rel="stylesheet">.
Sometimes the path is not detected correctly that's why it is recommended to use the bootstrapcdn for linking the css file.
Figured it out, instead of:
<script src="js/demo1.js"></script>
I used:
<script src="http://goldenhoney.zz.vc/themes/dolphin/html/js/demo1.js"></script>
IM SO HAPPY. BUT CONFUSED AS TO WHY MY PREVIOUS CODE DID NOT WORK.