Kind of difficult to explain so I will post a live link to my site where the code is hosted: link
Basically the issue is in the about section if the window is scaled smaller the section won't compensate for the jumbotron thats overflowing like it does for the other sections that don't make use of bootstrap divs. Hopefully that makes sense?
Here's the relevant code:
<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;">
<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<br>
<div class="jumbotron" style="background-color: #4c0000; padding-top: 10px; padding-bottom: 10px;">
<div class="container text-center" style="color: white;">
<h1>A Little About Me</h1>
<p style="font-size: 16px;">wordsgohere</p>
<p><h3><b>TLDR:</b></h3></p>
<p style="font-size: 16px">wordsgohere</p>
<img src="imgs/ryanyup.png" class="img-responsive" style="align-content: left">
</div>
</div>
</div>
</section>
And CSS:
.about-section {
min-height: 100%;
text-align: center;
background: #000080;
}
The entire code is also available on my git: here
Thank you.
Add <div class="clearfix"></div> right before closing the section. The reason you need this is because the div inside the section floats and thus is not a real block.
your content is just overflowing. add overflow: auto; to your section.
<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;overflow: auto;">
Related
I'm trying to build a CMS style html template so that a user can drop content into a template.
I'm using bootstrap grid to create the template but I'm having some issues.
Basically I'm shooting for a main body container, which has a sticky top, a sticky bottom, and then the main middle section filling the rest of the space which houses other areas.
IN this case, the middle section has 2 areas at 50%, one to the left and one to the right.
The problem is my middle section is currently stuck to the very top of the page along with the top section but I need it to fill up the middle the way that I've structured it but I"m not sure how I should change positioning.
Here's the current block:
<head>
<style type="text/css">
html,body{
height:100%;
}
</style>
</head>
<div class="container-fluid" style="text-align: center; height:100%; border: 1px solid red;">
<div class="row top">
<div class="col-lg-12" style=" background-color: #A0A0A0;position: absolute; height: 15%;">
<p style="color: white">Top</p>
</div>
</div>
<div class="row middle">
<div class="col-lg-6" style=" background-color: #A0A0A0">
<p style="color: white">Left</p>
</div>
<div class="col-lg-6" style=" background-color: #A0A0A0;">
<p style="color: white">Right</p>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style=" background-color: #A0A0A0; bottom:0; position: absolute; height: 10%;">
<p style="color: white">Bottom</p>
</div>
</div>
</div>
You're making it hard on yourself. Here are a few things you could change to get the desired result and also make it easier for yourself to control and contain your CSS. I've added .my-container class to .container-fluid to keep the changes from applying to other pages, but that's totally optional:
html,
body {
height: 100%;
}
.my-container {
display: flex;
flex-direction: column;
border: 1px solid red;
height: 100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #A0A0A0;
color: white;
text-align: center;
}
.my-container>.middle {
/* make middle section push header and footer at the margins of available space */
flex-grow: 1;
}
.my-container>.middle>* {
border: 1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid my-container">
<div class="row top">
<div class="col-lg-12">
<p>Top</p>
</div>
</div>
<div class="row middle">
<div class="col-lg-6">
<p>Left</p>
</div>
<div class="col-lg-6">
<p>Right</p>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12">
<p>Bottom</p>
</div>
</div>
</div>
I also:
removed inline styles
removed position:absolute (otherwise you'll need to keep header and footer height in sync with <body> or .container-fluid top and bottom paddings which allow all your content to be visible)
used flex to position the header and footer
removed % height which is considered very bad UI (consider what happens on mobile when you rotate the screen - how it affects an element with height:15%).
I'm new to coding and figured best way to learn is to get a gig, which I did. I've got some basic (like very basic) HTML & CSS knowledge, but bootstraps layout seemed to fit for what I'm trying to accomplish. Please keep in mind this is my very first project ever(!) when it comes to coding.
So here's the design I'm trying to replicate:
montere.it
I'm interested just in the main page, the actual tiles below the main image to be exact. I can't seem to find the best solution to position 2 tiles with background image, side by side(no gaps), with some h1 text and a small <p> above the background image in the tile, positioned centrally. There will be two more tiles below the initial two.
I SPENT A WEEK looking for similar solutions, but I'm exhausted and confused over all information digested. Can some one just point me in the right direction as to which features to use?
It seems even if I get to position both images, there are always gaps (right or left), there's no way to position the text exactly above the image centrally so it stays in one place when the display is resized and I don't want to cry about the rest.
I have a feeling it's a dumb question to ask, since none of the info I've found provide an exact solution to this question, so probably must be really easy to do and I just can't seem to grasp it.
I do apologize for taking up your time, but I just have no one else to ask.
Cheers!
Please check this out:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
<h1>Image 1</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
<h1>Image 2</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
<h1>Image 3</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
<h1>Image 4</h1>
</div>
</div>
And add this to your CSS file:
.col-img h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
In case any one else runs into this problem, here's the fully working solution. I'm just not sure if it will disappear under gjfonte's link, so I want to be safe here:
Here's what was provided by #gjfonte:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-1">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-2">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-3">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-4">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
</div>
.content {
padding-top: 90px;
color: #fff
}
.content h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.col-img .bg-img {
text-align: center;
margin: 0 -15px;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 250px;
}
.bg-img.img-1 {
background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}
.bg-img.img-2 {
background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}
.bg-img.img-3 {
background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}
.bg-img.img-4 {
background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}
I am using Bootstrap 4 Alpha 5 and I have the following HTML:
<div class="home-content">
<div class="container">
<div class="row flex-items-xs-middle">
<div class="col-md-7">
<h1 class="site-title text-xs-center text-md-left">
<span class="name">I'm Shivam Paw</span>
<span class="title">I create beautiful and bespoke websites to fit your needs</span>
</h1>
</div>
<div class="col-md-5">
<img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
</div>
</div>
</div>
</div>
However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on SO but it said you have to put the row class in a container which I have already done.
You can see the site live at https://www.shivampaw.com
I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?
If this is what you expect then look at your CSS. This is the line centering your content
.text-xs-center {
text-align: center!important;
}
This should fix it though
.site-title {
font-size: 36px;
color: white;
font-weight: bold;
text-align: left !important;
}
Turns out I had some offending CSS in my style.css:
*, img.full-size{
max-width: 100%;
}
Changing it to:
img.full-size{
max-width: 100%;
}
Fixed the problem.
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
Hi i was trying to create a website with the help of bootstrap 3.3
However I am stuck up with an issue that the image I am using is not responsive ie after a certain period it breaks.
This is the HTML code snippet:-
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 ">
<div class="box" style="margin-top:62px;">
<h1>Welcome to my world</h1>
<p>Welcome to web development program</p>
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
</div>
The below is my css code snippet:-
#intro{
background: url('images/prog.jpg') fixed;
background-size: cover;
height:650px;
/*position: fixed;*/
}
#continue{
margin-left: 218px;
margin-top: 27px;
color: blue;
}
Please help me with this.I am not sure why the class img-responsive is not working.
img-responsive class for img tag only not for div.
as this is background image, it will not resize but yes, you can use different size image on specific break point
Thanks