I'm trying to create a fairly simple website in bootstrap. I'd like each section to have its own background colour similar to what is done here: https://flaticons.co/. Do you happen to know if there's a class or css styling that will allow the background to be 100% width?
<div id="main" class="container">
<section class="row">
<p class="col-md-4 col-sm-6" col-sm-push-7><img src="images/an_image.gif"></p>
<h1 class="col-md-8 col-sm-6" col-sm-pull-7>Some content...</h1>
</section>
<!-- ===== background colour wanted here 100% window width===== -->
<section id="about" class="row">
<div>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</section>
</div>
-----------This works:
Guys! Guys!
Thanks for those answers. They're great for when bootstrap isn't involved. When bootstrap IS involved... this works. So many divs :( But it's working great!
<div class="secondary">
<section class="row container">
<div class="row">
<p class="col-md-4 col-sm-6" col-sm-push-7><img src="images/temp_riley.gif"></p>
<h1 class="col-md-8 col-sm-6" col-sm-pull-7>Hi. I'm Riley: a problem solving UX designer (and front-end developer) who is intrigued by change and loves a good challenge. </h1>
</div>
</section>
css:
.secondary {
background: green;
}
To make an element 100% the screen width in CSS you can use the following:
width: 100vw;
The vw stands for view width. This is new to CSS3. See here for compatibility in browsers (Current browsers almost universally support it).
In your simple example, setting the width of each section and div to 100% will stretch them across your browser's window. Here's a fiddle showing what you're looking for, http://jsfiddle.net/MPQVu/, but the basic idea at play is:
.parent_div { width: 100%; }
.child_div { width: 100%; }
Related
I need to layout a row so that the background of the row expands outside of the row area.
The required layout is in the picture, I want to have the extra white area before the actual text of the row.
When I start a new row and set it's background to white, only the area where the text start is white .
In ur app.css
body{
background-color:white !important;
}
this sets the page background to white
Your HTML structure can look like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
main: semantic distinction between nav, main, section, ...
bg-light: bs utility: override background-color
-->
<main class="bg-light" role="main">
<!--
section: semantic distinction between sections
typically to create components for CMS integration
-->
<section class="some-container-component my-3">
<div class="container">
<div class="row py-3">
<div class="col">
<p>Provide as much detail as possible about your question and what you've already tried. For this question specifically, your current HTML structure can boost your responses and potentially be more beneficial to future SO users.</p>
</div>
</div>
</div>
</section>
<section class="some-fluid-component my-3">
<!-- container-fluid: stretch full-width -->
<div class="container-fluid">
<div class="row py-3">
<!-- bg-white: override background-color -->
<!-- px-0 px-sm-3: fix on small screen alignment -->
<div class="col bg-white px-0 px-sm-3">
<!-- container: align the content -->
<div class="container">
<div class="row py-3">
<div class="col">
<h2 class="text-uppercase">Study history</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id lectus egestas, tincidunt nisl tristique, congue urna. Vestibulum vel iaculis tortor, non finibus eros. Donec nec bibendum mauris. Vivamus maximus velit et vulputate ullamcorper.
Integer sit amet sem vitae nibh auctor blandit vitae sit amet est. Mauris porttitor a nibh eu fringilla. Integer imperdiet rutrum aliquam. Pellentesque vel dictum lectus, vitae interdum tellus. Nullam consequat lorem a venenatis consequat.
Vivamus dictum nunc eget suscipit volutpat. Mauris nec elit et ante efficitur pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Hope this suits your needs.
I'm struggling with creating a dynamic layout which is different for mobile and desktop. The items should be different sorted based on the screen width and the layout should change.
Below is the main objective, where the left layout is for mobile and the right one is desktop:
The content of the blue, purple and yellow div can vary so the height is adjustable. The purple and yellow block must always be on the side of the gray + blue block on desktop.
Right now I have it working for only 3 columns but the 'dynamic' height is duplicated on all columns: Bootstrap 4: sidebar between columns on mobile. Columns under each other layout
To give you a clear idea of the possibilities here are some desktop variations:
I've managed to get it working with floats but the columns align on each other. Also have fixed it with a static max-height for the parent and use column wrap but I don't want to use a static max-height since the content should have a dynamic height..
I don't want to use some glitchy javascript or unsupported grid-css.
Looking forward to ideas/suggestions! Cheers.
You should be able to get this layout to work with a combination of CSS columns (not CSS grid) on "desktop", and flexbox on "mobile".
<div class="container">
<div class="d-flex d-md-columns flex-column min-vh-100">
<div class="d-md-inline-block light order-0">
light
</div>
<div class="d-md-inline-block blue order-2">
blue
</div>
<div class="d-md-inline-block purple order-1">
purple
</div>
<div class="d-md-inline-block yellow order-3">
yellow
</div>
</div>
</div>
The only extra CSS you'll need is a media query for the columns on larger (md) desktop widths. The the flexbox ordering will kick-in on mobile..
#media (min-width: 768px) {
.d-md-columns {
display: inline-block !important;
column-count: 2;
-webkit-column-gap: 0
-moz-column-gap: 0;
column-gap: 0;
}
}
https://codeply.com/go/QWIlredUTk
This works specifically for this 4 column layout. However, generally speaking flexbox columns do NOT fit together vertically like a "masonry" layout: Is it possible for flex items to align tightly to the items above them?
I think there is no pure CSS solution for this (at least without using CSS-grid or display:contents). Every CSS way I thought had bugs: float & column flexbox simple don't work in this particular case.
Column flexbox cannot wrap correctly an item if we work with a content without fix height and float can't create a "masonry" layout. Also Bootstrap card-columns are not a solution because your main objective is to align left and right column in height.
I know, you don't want glitchy javascript, but I think it is necessary to create your layout. So, I post you my solution (a jquery solution) without use any d-none class to prevent duplicate HTML & SEO problems.
Moreover, you are using Bootstrap and this framework makes extensive use of jQuery so, I think, it not a problem to ask jQuery for a little help. This help:
function move(){
if($(".main .col-lg-8").css('display')=='block'){
$('.purple').insertAfter('.gray');
} else {
$('.purple').insertBefore('.yellow');
}
}
$(window).resize(function(){move()})
$(document).ready(function(){move()})
To move our purple div in second position when .col-lg-8 have display:block
This is all code in action:
function move(){
if($(".main .col-lg-8").css('display')=='block'){
$('.purple').insertAfter('.gray');
} else {
$('.purple').insertBefore('.yellow');
}
}
$(window).resize(function(){move()})
$(document).ready(function(){move()})
.gray{
background-color: gray;
}
.blue{
background-color: blue;
}
.purple{
background-color: purple;
}
.yellow{
background-color: yellow;
}
<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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container mt-5">
<div class="row main">
<div class="col-lg-4 d-lg-flex flex-lg-column">
<div class="gray mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales finibus faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec, feugiat eget justo. Ut aliquam quis velit non euismod. Ut vehicula, sem quis cursus pretium, purus libero tincidunt eros, vitae hendrerit nisi mi vitae erat. Curabitur augue purus, sagittis tempor volutpat quis, congue sed mi. Sed gravida odio sed orci iaculis tincidunt. Etiam ac mauris sit amet turpis consequat fermentum ut vitae sem. Aliquam tincidunt convallis sem.</div>
<div class="blue flex-fill mb-4 mb-lg-0">
Lorem ipsum dolor sit amet, consectetur.Quisque sodales finibus </div>
</div>
<div class="col-lg-8 d-lg-flex flex-lg-column">
<div class="purple mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec, feugiat eget justo. Ut aliquam quis velit non euismod. Ut vehicula, sem quis cursus pretium, purus libero tincidunt eros, vitae hendrerit nisi mi vitae erat. Curabitur augue purus, sagittis tempor volutpat quis, congue sed mi. Sed gravida odio sed orci iaculis tincidunt. Etiam ac mauris sit amet turpis consequat fermentum ut vitae sem. Aliquam tincidunt convallis sem. </div>
<div class="yellow flex-fill">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
</div>
Waiting a pure CSS solution, this could be a way.
I am playing with Bootstrap 4 and I have noticed that when I put <img> inside <div class="row"> that has flex-wrap: nowrap, Firefox will automatically resize the image. Code and link to pen is below.
Why does Firefox do that, how does it calculate resizing ratio and how can I make it stop?
Codepen with issue (compare upper and lower image)
Screenshot on Firefox 59
.nowrap {
flex-wrap: nowrap;
}
<div class="container">
<div class="row nowrap">
<img src="https://www.w3schools.com/howto/img_fjords.jpg">
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse
a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada
ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.
Vestibulum commodo volutpat a, convallis ac, laoreet enim.
</div>
</div>
I'm using Bootstrap and I have the following code.
<div class="row">
<div class="col-sm-12">
<p style="margin-top:13px">
<img style="width: 200px; height: 78px;" src="/PATH_TO_IMAGE/unnamed%20copy%203.jpg" alt="">Praesent vehicula libero sed nisl dapibus aliquet. Ut ultricies nisi tempus, blandit nisl ut, tincidunt diam. Pellentesque non sapien sed massa mattis tristique. Nullam posuere purus elit. Vivamus sollicitudin placerat orci, id sodales sapien aliquam at. Cras vitae pretium dolor. Proin eu lectus id quam volutpat sollicitudin ut in orci.
</p>
</div>
</div>
I'd like to write some CSS so that the image centers in the container above the text when being viewed on mobile.
The problem is I can't get it in the center.
#media all and (max-width:480px) {
img {display:block;margin:0 auto;}
}
adjust the mediaquery to your will.. i'm assuming "mobile" has a max width of 480px, but it's not necessary true, that's up to you.
fiddle: http://jsfiddle.net/4y8tN/
the img tag is an inline element so you need to overwrite his natural behaviour on mobile with a mediaquery and center it with display:block;margin:0 auto;
add this styles to img tag
margin:0 auto;
Alright, I am making this website, from a tutorial, yes I am still a beginner, no the tutorial did not explain why this things happens.
Basically, this is what happens, I have the CSS like this.
#charset "utf-8";
/* CSS Document */
body { font-family: Arial, Helvetica, sans-serif; }
.container
{
width: 800px;
margin: 0 auto;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
#main
{
background: url(images/header.jpg) repeat-x;
}
#main .container
{
background: url(images/shine_04.jpg) no-repeat;
}
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
}
#logo h1
{
text-indent: -9999px;
margin-top: 40px;
}
And my HTML like this, I only post the body.
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="tagline">
<h3>I Love Stuff</h3>
</div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--end header -->
<div id="content">
<h2>Lorem ipsum, Dolor sit</h2>
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p>
<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
<div id="news">
<h3>Latest Updates</h3>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More</p>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More</p>
</div><!--end news-->
</div><!--end content-->
<div id="sidebar">
<div id="subscribe">
<h3>Subscribe!</h3>
<ul>
<li>Subscribe via RSS</li>
<li>Get Email Updates</li>
<li>Follow us on Twitter</li>
</ul>
</div>
<div id="popular">
<h3>Popular Items</h3>
<ul>
<li>Lorem ipsum dolor site amet</li>
<li>Ulvinar tincidunt, Mauris id</li>
<li>Lorem ipsum dolor site amet</li>
<li>Proin tempor erat sit tene</li>
</ul>
</div>
<div id="contributors">
<h3>Contributors</h3>
<ul>
<li>John Smith, freelance writer</li>
<li>Jack McCoy, designer</li>
<li>Lenny Briscoe, editor</li>
<li>John Smith, martketing</li>
</ul>
Join Our Team
</div>
</div><!--end sidebar-->
</div><!--end main container-->
</div><!--end main-->
<div id="footer">
<div class="container">
<p>Copyright © 2009 MySite <br />
All Rights Reserved</p>
</div><!--end footer container-->
</div><!--end footer-->
In the CSS, I have the #logo h1 selector, as you can see from the parent #logo selector, I have a background, which is exactly the logo, now I want the damn logo to be positioned 40px slightly lower from the top, that's why I put margin-top: 40px; , and I don't understand why, but instead of just the logo moving 40px down, the whole page moves down! T_T, I have already spent almost 1 hour trying to deduce all the logic that my brain can handle behind this, but I just cant!
And my question is just like what I said, why does the whole page move downwards? the logo image is the only element that's supposed to move, but why the whole thing? and what do I do to fix it?
Try substituting margin with padding: padding-top: 40px on the parent container, i.e. #header, since you have specified a background image for #logo and do not have to see it move.
Why paddings over margins? It's simple: margins have the propensity to collapse. W3C has a comprehensive section dedicated to rules that govern margin collapse.
p/s: For the ease of troubleshooting, try posting your issue on JSFiddle. Not only does it help the community to visualize your problem, but it also aids to expedit the process of actually solving your problem.
Try
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
background-attachment:fixed;
background-position: 0px 40px;
}
try this:
#logo
{
background:url(images/logo.png) no-repeat;
background-position: 0px 40px;
height:144px;
width:301px;
}