I've been starting to explore Twitter Bootstrap, and I tried to write or replicate some of their example codes. I used a div with their .container class for the wrapper, and added some rows and columns in it. Having a div with a .container class supposedly centers the div automatically, but in my case, I'm having an unbalanced content. The white space on the left side is much wider than the white space on the right side. Here's the code (I'm not using any css styles):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Room</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='style.css' />
<!--responsive bootsrap here-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div> <!-- first row -->
<div class="span12">
<div class="hero-unit">
<h1>Hey Mark! <small>and everybody!</small></h1>
<p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div><!-- second row -->
</div>
</div>
</body>
</html>
Here is the screenshot:
https://dl.dropboxusercontent.com/u/70465637/error_center.jpg
Notice how the left white space is wider than the right white space.
Help Please, thanks in advance.
Your div.span12 should be a child of div.row.
<div class="row">
<div class="span12"></div>
</div>
replace body tag with this
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div>
<!-- first row -->
</div>
<div class="row">
<div class="span12">
<div class="hero-unit">
<h1>
Hey Mark! <small>and everybody!</small></h1>
<p>
Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very
passionate about film making. I love the idea on sucking on making films, spending
$6m for my first feature film, which is my masterpiece of course! The title of my
masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit
her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div>
<!-- second row -->
</div>
</div>
</div></body>
check your code properly your span12 div should come inside of <div class="row"></div>
your code should be something like this
<div class="container">
<div class="row">
<div class="span12"> your content goes here </div>
</div>
</div>
If you're still having trouble with the whitespace after putting your span12 div inside your row, then it might be because Bootstrap specifies its own margins and padding etc.
You may have to set your own margins or padding for your span. You can override the bootstrap styles in your CSS with the !important declaration:
.span12 {
margin-left: -50px !important;
}
Related
I'm trying to add a vertical gutter between two rows using Bootstrap 5. But as you can see in the jsfiddle, there is no gutter. Does somebody know what is wrong here?
https://jsfiddle.net/re4879wt/
As far as I understand gutters (https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters) can be added to a .row using g-* or gy-*. None of both works in my case.
You have two div with gy-3 that is needed. put them together:
<div class="row gy-3">
<div class="col-12">
First part
</div>
<div class="col-12">
second part
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Devices Demo!</h1>
<div class="container overflow-hidden">
<div class="row gy-3">
<div class="col-12">
<ul id="device-list" class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
Add new device
</div>
<div class="card-body">
<form>
<div class="row mb-3">
<label for="deviceName" class="form-label col-sm-2">Device Name</label>
<input type="name" class="form-control col-sm-10" id="deviceName" placeholder="Network Switch">
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I am trying to implement the dropdown search feature from the UiKit, but am having trouble displaying the search bar itself. I have added only the scripts I need this far in my application, maybe I am missing one? Can anyone see what it is I'm missing
Dropdown Search UIKit
Here's my codepen:
Codepen example
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
</form>
</div>
</div>
I added these two your <head> tags and the search icon appeared + worked:
<head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
</head>
So like this overall:
<head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
</head>
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
</form>
</div>
</div>
I am learning front end developement using html, css.
I want to create a menubar and above menu bar i need to add an image ( header image).
Problem is I am not getting the image which is added to my images folder.
and this is the html code...
Kindly help me with the issue.
enter code here
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
color:green;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="/images/spmhead.jpg" scale="0" width="100%">
</a>
</div>
</nav>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Hello World Mentors </a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Hell</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
</div>
<br>
<div class="col-md-6">
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
</div>
<div class="container">
<div class="col-md-6">
<h2>Java</h2>
<marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>
</div>
<div class="col-md-6">
<marquee direction="up">This text will scroll from bottom to up</marquee>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<script src="js/jquery.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>
Refer the image tag with relative path .
<img src="./images/spmhead.jpg" scale="0" width="100%">
It must be <img src="images/spmhead.jpg" scale="0" width="100%">.
Finally, I got solution for the question I have posted above.
This is the code which worked for me.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
color:green;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a href="#">
<img src="images/spmhead.jpg" class="img-responsive">
</a>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Hello World Mentors </a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Hell</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
</div>
<br>
<div class="col-md-6">
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
</div>
<div class="container">
<div class="col-md-6">
<h2>Java</h2>
<marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>
</div>
<div class="col-md-6">
<marquee direction="up">This text will scroll from bottom to up</marquee>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<script src="js/jquery.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>
I've been trying to change the image of the panel button and the colors of the menu but I have been unsuccessful. I would like the panel button blend in with the header similar to the one on the facebook mobile app. Also I would like to be able to change the text color and background color of the overlay menu (menu divider and menu option "news"). Can someone please help me with this. Thanks in advance.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a data-controltype="panelbutton" data-role="button" data-theme="b" href="#panel_menu" data-icon="bars" data-iconpos="notext" ></a>
<h1>My App</h1>
</div>
<div data-role="panel" id="panel_menu" data-position="left" data-display="overlay" data-theme="b">
<ul data-role="listview" data-divider-theme="a" data-inset="false">
<li data-role="list-divider" role="heading"> Menu </li>
<li data-theme="c"> News </li>
</ul>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a id="custom-button" class="custom-button" data-controltype="panelbutton" data-role="button" data-theme="b" href="#panel_menu" data-icon="bars" data-iconpos="notext" ></a>
<h1>My App</h1>
</div>
<div data-role="panel" id="panel_menu" data-position="left" data-display="overlay" data-theme="b">
<ul data-role="listview" data-divider-theme="a" data-inset="false">
<li data-role="list-divider" role="heading"> Menu </li>
<li data-theme="c"> News </li>
</ul>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer Text</h1>
</div>
</div>
</body>
CSS:
#custom-button{
background: transparent;
}
.custom-button{
background:transparent!important;
}
Explanation:
Every element that you need to write custom styles you can ad an id, like in case of the a element, i have added an custom-button id. Keep in mind id must be unique, one per page. and every style added to id will automatically override any class style.
You can also add classes to already existing once, but use !important hack to override existing styles.
I'm new to Twitter Bootstrap framework and CSS.
I want my right sidebar height to go along with the height of my main content. How should I do that.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="includes/Bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/Bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="container">
<div class="container-fluid">
<header class="margin-top">
<div class="row-fluid">
<img border=0 src="images/header.jpg" alt="">
</div>
</header>
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Home</li>
<li>Contact </li>
<li>About Us</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
If I have a long content here.. The sidebar does not follow the height of the content.
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div>
</div>
</body>
</html>
your container seems to be fine and has a auto height so what is the problem
here you see the fiddle
http://jsfiddle.net/cancerian73/ZpZCD/
.container {background-color:#fc0;}