I'm trying to convert an existing site (and make it responsive) using Bootstrap (4.3.1) - and learn Bootstrap as I go through it.
I have a top-Nav
then a middle portion - containing:
a Sidebar (on the left)
& page content on the right
then at the bottom a Footer.
But try as I might (& I've spend 2 days reading Bootstrap's examples, & Stack Overflow Qs) - I can't get the middle section to be same width as, and to line-up with, the header - without ridiculous amounts of css.
I'm sure/hopeful? there's a easy way ;) What am I not doing/doing wrong?
Here's my code (inline code/colors just to help me see where elements are)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<script src="bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body color="pink">
<!-- Page container -->
<div id="HomePage"class="container">
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
<!-- Middle Section of the Page page -->
<div class="container w-100 p-0">
<div class="container row w-100 p-0">
<!-- Start of left Sidebar -->
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
</div>
<!-- Page Footer -->
<nav class="navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</div> <!-- End of Page container -->
</body>
</html>
PS - Rationale: I need the middle portion full width, as on some pages there are images at top-right of the page that should line-up with right-hand edge of header,
And the sidebar contains full width images, with almost no padding etc.
Just wrap each section of your website into a different row and then set grid columns to their inner divs, using col. Like so:
<div id="homePage" class="container">
<header class="row">
<nav class="col navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
</header>
<div class="row">
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
<footer class="row">
<nav class="col navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</footer>
</div>
Add width:100% to the middle section. That should stretch the div to occupy 100% of the parent (in this case the container's) width which is also the same as the headers width
Related
I am trying to achieve below using Tailwind CSS Grid:
My HTML code is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1">
<banner class="" style="background-image: url(Banner.jpg)">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</banner>
<button>
</button>
</section>
</section>
</body>
</html>
[Q1]: Why the background image does not show up until I put a block or flex class <banner class="block" style="background-image: url(Banner.jpg)"> ?
[Q2]: Why text in <h1> tag is not on the top of background image even though align-top is in place ?
Thanks a lot.
Q1: there is no html element named banner. When you use a div it works.
Q2: it is, however since the banner does not have a height defined it can't be on top
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1 grid grid-cols-10">
<div class="bg-no-repeat bg-cover col-span-9" style="background-image: url('https://media.giphy.com/media/26BRQTezZrKak4BeE/giphy.gif')">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</div>
<button class="col-span-1">
Menu
</button>
</section>
<div class="row-span-8 text-center text-6xl">Main content</div>
<div class="row-span-1 bg-yellow text-center">Footer</div>
</section>
</body>
Example pen: https://codepen.io/onewaveadrian/pen/MWpvwvx
I am trying to create a hero image with text on top of the image. I wanted to create this using mostly bootstrap 4 so I don't have to write a lot of CSS. Bootstrap card has an image-overlay class that helps put text over the image. so I am halfway there thanks to bootstrap, But I am having some issues on mobile and other things. Did i reach the bootstrap limit and need some CSS? or I can modify my bootstrap code and fix these issues below
example image
Problems
on mobile texts and buttons are going outside the image, I want to keep it inside the image
how can I make the "card-image-overlay" left centred like the example (see example image). I
made it left, not centred.
I put w-25 on text and button parent div so that I can control the width and the div stays on the left even if the texts are long (like the lorem ipsum text on example)
my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="container">
<div class="card bg-dark text-white">
<img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay ">
<div class="text-left w-25 ">
<h2 class="card-title "> Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).
<div class="card bg-dark text-white">
<img class="card-img img-responsive"
src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay d-flex align-items-center">
<div class="row">
<div class="text-left col-lg-3 col-sm-6">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
Use d-flex align-items-center on the card-img-overlay to vertically center the row.
https://www.codeply.com/go/eRpRZj9Z8M
I tried, having a modal inside a footer section of a page (using materialize css). On clicking the modal, it pops up and shows a materialize collection. But once I close the pop up, the modal button , sort of freezes , and only if i move my cursor over it , it regains it original color.
As in the image, the modal button looks like it's inactive(whitish blue color) and if I move my mouse over it, it regains its original color.
Here's my code:
$(document).ready(function() {
$('#modal1').modal();
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<footer class="page-footer black">
<div class="row">
<div class="col s1 m1">
<div class="footer-copyright">
<div class="container" id="copyright">
© copyright text
</div>
</div>
</div>
<div class="col s11 m11">
<!-- <div class="row" id="modal"> -->
<a class="waves-effect blue waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<div class="collection">
<h2 style="color:black;">Text Analysis</h2>
item 1
item 2
item3
</div>
<div class="modal">
Close
</div>
</div>
</div>
</div>
</div>
</footer>
How do I rectify this glitch?
As stated in this ISSUE, the issue is given by the double inclusion of javascript files in your <head>.
Remove the older version in order to make it work..
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
I'm creating a simple 2 column layout. The left column should be narrow and contains a vertical navigation bar, the right column will contain the main content of the site. I'm using bulma-css columns to create this layout.
The problem that I'm encountering is that depending on the horizontal windows size, part of the right side of the second column is falling off the page. So this column is not scaling appropriately.
Below is a minimal example that illustrates the problem. Depending on window size the button will (partially) fall off the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-narrow">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<div class="container">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
</div>
</body>
Good expected behaviour:
Bad:
Actually the problem is your .container class in the second column which has a width...better or remove it and use .is-one-third class in the first column to make it smaller or other [bulma grid column classes]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="columns is-mobile">
<div class="column is-one-third">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
I'm trying to create a simple HTML document that has two main divs - the first one has a background image w/a background size of cover so that the image takes up the entire top portion of the screen, the second div is directly beneath the first div and contains an img tag.
This seems simple enough, but when I apply a background:url style to my first div, scrolling down causes my second div image to overlap the background image of the first div. I expected this so I set a height property in my first div and this has no effect.
How do I make the first image cover the first div but not have the second one overlap it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="font-family: 'lato'; font-size:18px;">
<div class="container-fluid">
<div style="background:url('http://www.screensavergift.com/wp-content/uploads/2011/01/BeautifulLakeView1.jpg') no-repeat center center fixed; background-size:cover; height:1100px" class="row">
<div class="row">
<div style="margin-top:20px" class="text-right col-xs-offset-1 col-xs-10">
Login | Sign Up
</div>
</div>
<div class="row">
<div style="background-color:rgba(62,83,78,0.2); margin-top:10px" class="text-center col-xs-offset-1 col-xs-10">
<span style="color:white; font-size:40px;">
Join us in God's country!
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<img src="http://www.ynaija.com/wp-content/uploads/2014/05/Bird.jpg" alt="Cyrillic alphabet" />
</div>
</div>
</div>
</body>
</html>
See an example of what I'm trying to do here:
http://jsfiddle.net/y0oL6k4d/