Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
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>Homepage</title>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
Related
When i zoom in and out on my website, the navigation bar and my "Open Touch" text seems to go out of the div and float down and for my navigation bar, it seems to disappear word by word when i zoom in. I've been trying to fix this for the past 2days and researching on this website and nothing seems to work.
My code and codepen will be available as well
How can I keep the "Open Touch" Text from overlapping the navigation bar?
Demo: http://codepen.io/anon/pen/xqLLeJ
html
<html>
<head>
<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">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div"><img class="x-icon1" id="fadeX" src="web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords">Test</h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords">Test</h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords">Test</h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords">Test</h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords">Test</h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help is appreciated,
Thank You
Take out overflow: hidden from
#nav-menu {
width: 50%;
height: 70%;
position: absolute;
z-index: 101;
word-wrap: break-word;
/* overflow: hidden; */
left: 15%;
top: 20%;
}
this is my code. Materialize.showStaggeredList() not firing on button click.
when i try to click button i want sign up link on side of the browser window but the button click is not firing. I have seen the docs of Materialize and work accordingly but failed. Any help
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
html
{
height: 100%;
background: url(Images/234.jpg) no-repeat center center;
background-size: cover;
}
</style>
<title>HelpingO</title>
<link rel="stylesheet" href="materialize/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css" />
<script src="materialize/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav style="background-color:#554253">
<div class="navbar-wrapper">
<a href="#" class="brand-logo col s2 left-align">
<img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" />
HelpingO</a>
<ul class="right hide-on-med-and-down">
<li>Contact</li>
<li>Services</li>
<li>About Us</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="navbar-wrapper col s3">
<div class="col s12 m12 l12 right-align">
Click Me </div>
</div>
</nav>
<ul id="staggered-test" class="right">
<li style="opacity:0"><i class="material-icons">email</i></li>
<li style="opacity:0"><i class="material-icons">web</i></li>
<li style="opacity:0"><i class="material-icons">android</i></li>
</ul>
<div class="container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
<div class="row center">
<h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
</div>
</body>
<html>
It looks like you have declared your scripts in the wrong order. Materialize uses jQuery so it needs to be loaded first -
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
Then to get your staggered list to work you'll need to change materialize to Materialize (note the capital "M") -
Click Me </div>
In full (working) -
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
html {
height: 100%;
background: url(Images/234.jpg) no-repeat center center;
background-size: cover;
}
</style>
<title>HelpingO</title>
<link rel="stylesheet" href="materialize/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>
</head>
<body>
<nav style="background-color:#554253">
<div class="navbar-wrapper">
<a href="#" class="brand-logo col s2 left-align">
<img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" /> HelpingO
</a>
<ul class="right hide-on-med-and-down">
<li>Contact</li>
<li>Services</li>
<li>About Us</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="navbar-wrapper col s3">
<div class="col s12 m12 l12 right-align">
Click Me </div>
</div>
</nav>
<ul id="staggered-test" class="right">
<li style="opacity:0"><i class="material-icons">email</i></li>
<li style="opacity:0"><i class="material-icons">web</i></li>
<li style="opacity:0"><i class="material-icons">android</i></li>
</ul>
<div class="container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
<div class="row center">
<h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
</div>
</body>
<html>
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
I'm in the process of learning bootstrap and am struggling very hard. I know that the default row height in bootstrap is whatever height will be able to contain a child element (i.e. a column). However, the default height of a column is to take up the minimum amount of space.
So my question: How do I force the height of a column to take up the height of the row? Let's say I have two columns in a row. The height of one column is greater than the other due to the contents of a column being more. How do I force the sibling column to be the same height?
I feel like I've tried everything and am having no luck. I've tried using the flex properties, the table properties, but nothing is working.
Also, is it good practice for me to be modifying the css of bootstrap classes? Couldn't this possibly break the entire framework?
TLDR: What is the best method for declaring div heights in bootstrap?
As an example, how would I get both of the 'hello there' divs to occupy the same height in the same row?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffeedev Data Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style> body { padding-top: 70px;} .col-md-9{height: 100%}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Plot</li>
</ul>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid ">
<div class="row">
<div class="col-md-3">
<div class="alert alert-success" role="alert">
<h3> Hello there!</h3>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-md-9">
<div class="alert alert-success" role="alert">
<h3> Hello there!</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
Hi there!
</div>
</div>
</div>
</body>
</html>
Edit: Attempting with .row-eq-height. Still no luck.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffeedev Data Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style> body { padding-top: 70px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Plot</li>
</ul>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid ">
<div class="row row-eq-height">
<div class="col-md-3" style="background-color: red">
Hello!
<br>
<br>
<br>
</div>
<div class="col-md-9" style="background-color: red">
Hello!
</div>
</div>
</div>
</body>
</html>
if you just wand to control the height you can specify the height in your own css like;
#myCustomDivId{
height: 10em;
}
em will be scale to the screen size. just playing about with the number until it looks the way you want.
I'm using the page-header class to centre the main content of my page. This creates some empty column space on either sides of page-header, and I'd like to utilize that space (possibly to add AdSense banners).
Here is what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left">
<span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right">
<span>Right Dong</span>
</div>
</div>
</div>
</body>
</html>
I do not see Left Ding or Right Dong anywhere on the page. Here is the rendered html: https://jsfiddle.net/bgmjs3qf/
What is the correct way to utilize the left and right column spaces?
You have to add padding to the top of your page since you have a fixed navbar.
See example and Docs.
body {
padding-top: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left"> <span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right"> <span>Right Dong</span>
</div>
</div>
</div>
<body>
<div class="container">
<div class="navbar1 navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>sign in</li>
</ul>
</div>
</div>
</div><!--/container NAVBAR-->
<div class="container">
<div class="row-fluid">
<div class="header">
<div class="span12">
<h1> Hello World</h1>
</div>
</div><!--/inner-wrapper-->
</div><!--/row-fluid-->
</div><!--/container-->
</body>
EDIT
In this classes like span**, navbar, row-fluid, container create default padding.
Take a look into this page: http://jsfiddle.net/SjYyj/1/
There is a gap between "header" class and "navbar"! How to remove that without adjusting padding!
Edit - Update:
Well, you basically want the padded area to have a background color, without changing the padding.
The simplest solution I could think of is:
Wrap the whole 'back end' with a fixer class, and give it a background color.
html:
<!DOCTYPE html>
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en">
<head>
<title>Home</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
rel="stylesheet">
</head>
<body>
<div class="fixpadding"><!--Fixer-->
<div class="container">
<div class="navbar1 navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>sign in
</li>
</ul>
</div>
</div>
</div>
<!--/container-->
<div class="container">
<div class="row-fluid">
<div class="header">
<div class="span12">
<h1> Hello World</h1>
</div>
</div>
<!--/inner-wrapper-->
</div>
<!--/row-fluid-->
</div>
<!--/container-->
</div>
<!--End Fixer-->
<script src="./js/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
</body>
</html>
css:
.header {
background-color: grey;
}
.fixpadding {
background-color: grey;
border-radius:4px 4px 0 0; /* Fine-tuning with nav bar */
}
Try it out.
Edit 2:
You may see that if you resize the window, the background color will "spread-out" .
To fix this, I've warped all of the body with a container, and set some more css:
html:
<div class="container">
<div class="fixpadding">
...
</div>
<!--End Fixer-->
</div>
css:
.header {
background-color: grey;
}
.fixpadding {
background-color: grey;
background-size: contain;
border-radius:4px 4px 0 0;/* Fine-tuning with nav bar*/
}
Check it out.
Edit 3:
You can't color a padded area specifically.
I made some changes to show you what you could do:
Try it here.
The red and green colors are there so you could see the impact.
I've hard-coded the css into the html so you won't need to hassle with the selectors.
HTML:
<!DOCTYPE html>
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en">
<head>
<title>Home</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background-color:red;border-radius:4px 4px 0 0;">
<div class="navbar1 navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>sign in</li>
</ul>
</div>
</div>
</div><!--/container-->
<div class="container" style="background-color:green;">
<div class="row-fluid">
<div class="header">
<div class="span12">
<h1> Hello World</h1>
</div>
</div><!--/inner-wrapper-->
</div><!--/row-fluid-->
</div><!--/container-->
<script src="./js/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
</body>
</html>