Why I am I not being able to apply padding-top and margin-top in my html file? Can Someone please help me with what i may be doing wrong? The following are the main tags:
body{
background-color: #1e2a32;
margin:0 auto;}
#pagewrap{
width:1250px;
height:auto;
margin:auto;
}
Have added the html mark up:
<!doctype html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" class="csstransforms csstransforms3d csstransitions"><head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cure Sight Laser Center</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewrap"> <!--pagewrap start-->
<!--header start-->
<div id="header">
<div class="top">
<span style="margin-left:50px;">
<img src="images/phone.png">
<span class="text1">+00 000 000 00 </span>
<img src="images/mail.png">
<span class="text1">info#curesightindia.com</span>
<contact>Contact Us </contact>
</span>
<span style="margin-left:450px; margin-top:30px;">
<img src="images/twitter.png">
<span style="padding-left:4px;"><img src="images/facebook.png"></span>
<span style="padding-left:4px;"><img src="images/googleplus.png"></span>
<span style="padding-left:4px;"><img src="images/linkedin.png"></span>
<span style="padding-left:4px;"><img src="images/quora.png"></span>
</span>
<!-- search form -->
<div class="top-search-form">
<div class="gdl-search-button" id="gdl-search-button">
</div>
<div class="search-wrapper">
<div class="gdl-search-form">
<form method="get" id="searchform"
action="#">
<div class="search-text">
<input type="text"
value="Search..." name="s" id="s" autocomplete="off" data-default="Search...">
</div>
<input type="submit"
id="searchsubmit" value="Go!">
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div><!--top end-->
<div class="logo"><br>
<span style="margin-left:30px;"><img src="images/logo.png"></span> </div><!--logo
end-->
<div class="navigation">
<br>
<!-- Navigation -->
</div><!--navigation end-->
<div class="bottom">
</div><!--bottom end-->
</div> <!--header end-->
<div id="slider">
</div><!--slider ends-->
<div class="primary">
<div class="primary_box1">
<span class="text2" style="padding-left:50px; padding-top:0px;">Why Choose Us</span>
<br>
<div class="text3";>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box1 end-->
<div class="primary_box2">
<span class="text2" style="padding-left:50px;">Dr. Parimal Desai</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box2 end-->
<div class="primary_box3">
<span class="text2" style="padding-left:50px;">Myths About lasik</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box3 end-->
</div><!--primary end-->
<div class="secondary">
<div class="side-left">
<div class="side-left_top"> <span class="text5"> Video </span> <a href="#"> <img
src="images/view-all-btn.png" width="57" height="13"></a></div>
<span style="margin-right:30px;"> </span>
</div><!--side-left end-->
<div class="side-right">
<div class="side-right_top"> <span class="text5">Testimonials </span><a href="#">
<span style="margin-left:5%; margin-top:3px;"><img src="images/view-all-btn.png"
width="57" height="13"></span></a>
</div>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident. </p>
<br>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident.</p>
</div><!--side-right end-->
</div><!--secondary end-->
</div><!--content end-->
<!--footer start-->
<div id="footer">
<br><br>
<span class="text4" style="padding-top:50px; padding-left:480px;">Copyright 2013
by Cure Sight Laser Centre. All Right Reserved.</span>
<span style="margin:0px 0 0 50px"></span> <a href="#top">
<img src="images/to-the-top.png" width="67" height="13"></a>
</div><!--footer end-->
</div><!--pagewrap end-->
</body>
</html>
Is it happening beacuse i've added the percentage value?
`
Try something like this instead:
You have too much html to give you an accurate answer --- Please provide CSS to give you a better answer.
See here: http://jsfiddle.net/aLSXn/3/
HTML:
<div id="container">
<header id="main-header">
<h3 id="logo">Some logo</h3>
<nav id="main-nav">
<ul>
<li class="main-nav-link">Nav1</li>
<li class="main-nav-link">Nav2</li>
<li class="main-nav-link">Nav3</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body {
width:100%;
background:lightgray;
}
#container {
width:100%;
}
#main-header {
display:block;
}
#logo {
position:absolute;
top:0;
left:0;
}
#main-nav {
display:block;
background:gray;
margin:5em 6em;
}
#main-nav ul {
list-style:none;
}
#main-nav .main-nav-link {
display:inline-block;
}
#main-nav .main-nav-link a {
display:inline-block;
padding:0.8em 1em;
text-decoration:none;
color:white;
font:bold 1em arial;
}
See here: http://jsfiddle.net/aLSXn/3/
Related
Fairly new to web development. I am attempting to make a responsive website for both mobile and desktop. I'll be honest, its terrible right now. But I'm working on it. I currently have 2 major issues that I've been fighting with for about a full day now. Also Yes I am running django on the backend and vue as a cdn on the front.
I have deployed rellax js into the website for a paralax effect however its creating an ugly overlap and I can't seem to get ride of it.
Once I deployed rellax js my text that was supposed to be center of the landing page disappeared to the bottom. I would like it centered.
Could anyone help me with these issues? Also any input as to how to make this mobile friendly would be awesome, I was just going to lock the images at a certain size if the screen was small.
HTML
{% include 'core/navbar.html' %} {% load static %}
<!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 rel="stylesheet" href="{% static "css/style.css" %}" />
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
/>
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css"
/>
<title>Tester Site</title>
</head>
<body>
<section id="hero" class="d-flex align-items-center">
<div id="bg">
<div class="bg">
<img src="{% static "media/ocean.png" %}" class="bg" alt="" data-rellax-speed="2" data-rellax-percentage="0.5" />
<img src="{% static "media/girl.png" %}" class="girl" data-rellax-speed="7" data-rellax-percentage="0.5" style="top: -195px; height: 1000px; width: auto;" />
</div>
</div>
<div
class="col-sm-2"
data-aos="zoom-in"
data-aos-delay="100"
>
<h1>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">x</span>
<span class="blast" aria-hidden="true" style="opacity: 1">p</span>
<span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 8px">l
</span>
<span class="blast" aria-hidden="true" style="opacity: 1">o</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
</h1>
<h2>
<span class="blast" aria-hidden="true" style="opacity: 1">C</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">a</span>
<span class="blast" aria-hidden="true" style="opacity: 1">t</span>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 3px"
>e</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>a</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
</span>
</h2>
About Me
</div>
</section>
<footer id="footer" data-rellax-speed="10" data-rellax-percentage="-1.0"></footer>
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<br>
<h2>
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="https://webp.bearsofficialsstore.com/237169917.webp" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content">
<h3>Illustrator & UI/UX Designer</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Birthday:</strong> 1 May 1995</li>
<li><i class="bi bi-rounded-right"></i> <strong>Website:</strong> www.example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Phone:</strong> +123 456 7890</li>
<li><i class="bi bi-rounded-right"></i> <strong>City:</strong> City : New York, USA</li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Age:</strong> 30</li>
<li><i class="bi bi-rounded-right"></i> <strong>Degree:</strong> Master</li>
<li><i class="bi bi-rounded-right"></i> <strong>PhEmailone:</strong> email#example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Freelance:</strong> Available</li>
</ul>
</div>
</div>
<p>
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">Video Editing <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Audio Editing <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">Content Creation <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
</div>
</template>
<br>
<br>
<br>
<br>
<!-- End Hero -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax#master/rellax.min.js"></script>
<script>
// Center all the things!
var rellax = new Rellax('.girl', {
center: false
});
var rellax = new Rellax('.bg', {
center: true
});
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<script>
var _CONTENT = [
"Simple Life",
"Meaningful life",
"Positive Life",
"masterpiece"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 60);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 120);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>
</body>
</html>
Image 1
Image 2 after scrolling down
as you can see the background image that is being scrolled over is popping out on the other side and looks nasty. Any idea how to fix that?
You can also see how the about btn and the txt are all right there at the bottom and not at the top and centered where I am trying to put them.
Any help would be amazing!!
Bootstrap 4 - the content in the navigation bar moves slightly to the right when the page is shorter than the screen height - this doesn't happen with longer pages. I have posted the code from two pages. A home page which is the longer page and a login page which is shorter and twitches.
I am wondering if the solution is to give a minimum height for the content - though I would prefer not to override Boostrap
Longer content with static non twitching navbar
<!-- head start -->
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Home page of MVC test </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- 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/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>
<!-- head end -->
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item active'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- page content start -->
<div class="container">
<!-- start of row -->
<div class="row">
<!-- page content left start -->
<div class="col-md-8">
<h1 class="page-header">
Home </h1>
<h2 ><a href = "#" >A first post - I do say</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 11:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
<h2 ><a href = "#" >A second post</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 16:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
<!-- page content left end -->
<!-- page content right start -->
<div class="col-md-4 bg-light ">
<!-- Blog Search Well -->
<div class="pt-3 ml-1">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="pt-1 ml-1">
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="bg-light">
<h4>Side Widget Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
</div>
<!-- page content right end -->
</div>
<!-- end of row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!-- page content end -->
Shorter content with content that moves or twitches to the right
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>This is a login title </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- 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/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>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item active'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="col-md-6 mx-auto">
<div class="card card-light bg-light mt-5">
<h2>Login to your account</h2>
<p>Please fill in your credentials</p>
<form action="http://mvc.test/login" method="post" >
<div class="form-group">
<label for="email">Email: <sup>*</sup></label>
<input type="email" name="email" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<label for="password">Password: <sup>*</sup></label>
<input type="password" name="password" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Login" class="btn btn-success btn-block">
</div>
<div class="col">
Don't have an account? Login
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" >
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
thanks C
html {
overflow-y: scroll;
}
This is a solution to my 'twitching' nav bar, see above. I've read that this is not a good CSS and that it doesn't work in opera - however I've seen that the BBC website uses this if that means anything.
I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex
I've been searching for an answer all day and have not quite found one.
Using Bootstrap 4, how does one wrap text around an image using d-flex or flex-wrap in with the grid layout with columns and rows. I have provided my code and two image examples. I hope this is possible.
I have viewed this example - https://www.codeply.com/api/run but it's quite different whereas the image is fixed sizing but we need the image to be responsive.
Cheers and thanks in advance.
Example image here with photo
Example diagram here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container" style="margin-top: 30px;">
<div class="row" style="border: 1px solid #ddd;">
<div class="col-sm-6 col-lg-6 col-xl-5">
<div class="imagebox">
<figure>
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-7">
<div class="row">
<div class="col-12"><small>BPP Rating - 88%</small></div>
<!-- this below line will wrap on all screens -->
<div class="col-6"><small>Online Rating - 88% </small></div>
<div class="col-6 text-right"><small>Total Beds - 50</small></div>
</div>
<hr style="margin: 0.5rem 0;">
<div class="row">
<div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
<div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
</div>
<div class="row">
<div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
</div>
</div>
</div>
you can try like this, by giving background-image on the row and its property to set it one center of the div
here is an example - https://jsfiddle.net/erymag7b/27/
you can use float:left in .imagebox to wrap text around an image and use clean:both in P tag to let text under an image
https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100
tip : Avoid Inline Styles for CSS Design
.imagebox {
float: left;
margin-right: 1em;
}
div.container {
max-width: 100%;
}
figcaption.imagebox-desc {
top: 0;
position: absolute;
left: 0;
color: white;
background: rgba(4, 4, 4, 0.8);
width: 100%;
padding: 0.7rem 0 0.5rem 1.2rem;
font-size: 1.2rem;
}
.imagebox-inner {
position: relative;
display: inline-block;
}
.img {
width: 100%;
}
#media (max-width: 768px) {
.text {
clear: both;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="imagebox">
<figure class="imagebox-inner">
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
<div><small>BPP Rating - 88%</small></div>
<div class="d-flex justify-content-between"> <small>Online Rating - 88% </small> <small>Total Beds - 50</small></div>
<hr class="m3">
<div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
<div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
<p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>
I thought that I'd be able to shift this single button to the end of a flex-box.
I have set the parent to be a display: flex; and then I thought that I'd be able to target one element and pin it to the bottom of the container with align-self: flex-end;
It doesn't work. Here is my pen: My Codepen illustrating the issue
<div class="row services">
<div class="small-3 panel columns service">
<i class="fa fa-thumbs-o-up"></i>
<h3>SUSPENDISSE</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-key"></i>
<h3>MAECENAS</h3><p>Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flag"></i>
<h3>ALIQUAM</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flask"></i>
<h3>HABITASSE</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
<div class="button">Read More</div>
</div>
</div>
.services {
display: flex;
}
.service {
flex-direction: column;
}
.button {
align-self: flex-end;
}
align-self will only work with direct child elements of a flex parent, so:
Make .service a flex parent with display: flex and set flex-wrap: wrap
Center the button with margin: 0 auto
Working Example
Also available as a Codepen.
.services {
display: flex;
}
.service {
display: flex;
flex-wrap: wrap;
}
.button {
align-self: flex-end;
margin: 0 auto !important;
/* !important used for this example only to override foundation.css*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row services">
<div class="small-3 panel columns service">
<i class="fa fa-thumbs-o-up"></i>
<h3>SUSPENDISSE</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-key"></i>
<h3>MAECENAS</h3><p>Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flag"></i>
<h3>ALIQUAM</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flask"></i>
<h3>HABITASSE</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
<div class="button">Read More</div>
</div>
</div>