so I realized if I have more content it shows the complete background image. Is there a neat way to do this?
<div class="jumbotron jumbotron-fluid" style="background: url('./assets/img/mhacks.jpg') no-repeat center center; margin-top: 120px;">
<div class="container text-sm-center p-t-3">
<br>
<br>
<br>
<br>
<p class="lead">Under construction</p>
<br>
<br>
<br>
</div>
</div>
I would experiment with using the contain or cover value for the background-size property:
.jumbotron.test {
background: url(http://www.outdoor-photos.com/_photo/4488849.jpg) no-repeat;
background-size: cover; /*** Try interchanging with contain/cover when using media queries for different results at different viewports. ***/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="jumbotron jumbotron-fluid test">
<div class="container text-sm-center p-t-3">
<br>
<br>
<br>
<br>
<p class="lead">Under construction</p>
<br>
<br>
<br>
</div>
</div>
background: bg-color bg-image position/bg-size bg-repeat; //shorthand
div{
background: #333 url('../img-url.jpg') no-repeat center center;
background-size: cover;
}
Change your html as below:
<div class="jumbotron jumbotron-fluid" style="background: url('variable-scope-ruby.jpg') no-repeat center center; margin-top: 120px;">
<div class="container text-sm-center p-y-3">
<p class="lead">Under construction</p>
</div>
</div>
also add below css style:
<style>
.lead{
padding: 30px 0px;
text-align:center;
}
</style>
and update .lead padding as your requirement.
Related
I am making a website (brickman.glitch.me) and have a scroll button. How can I make it scroll down to what seems like a different page?
I've tried using the section tag, but I'm not the most experience so I've become stuck.
<section class="company-heading intro-type" id="parallax-one">
<div class="container">
<div class="row product-title-info">
<div class="col-md-12">
<a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
</div>
</div>
</div>
<div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/anchor/company-hero2.jpg);"></div>
</section>
<div class="main">
<section id="section2">
<div class="container jumbo">
<div class="jumbotron">
<p1>test</p1>
I want to make this so it scrolls down to a page where it's got a different background etc, so it looks like a different page. I have an example from a friend's website (questallation.glitch.me) where the button scrolls down. I would like to try make something similar to this. Any help?
Thanks in advance.
To automatically scroll to another section you can use href="x" where x is the id of the section you want to scroll to.
Here is a small example:
<div style="background-color: green;height: 2000px">
<a href="#next-section">Hello</>
</div>
<div id="next-section" style="background-color: red; height: 2000px">
</div>
Have you looked at scroll-behavior: smooth? There is no iOS Safari support, but there is a polyfill.
From MDN
The scroll-behavior CSS property sets the behavior for a scrolling
box when scrolling is triggered by the navigation or CSSOM scrolling
APIs.
body {
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
nav {
background-color: #000;
display: block;
padding: 1em 0;
text-align: center;
}
nav a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
.scrolling-box {
background-color: #eaeaea;
display: block;
flex-grow: 1;
overflow-y: scroll;
scroll-behavior: smooth;
text-align: center;
width: 100vw;
}
section {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<nav>
1
2
3
</nav>
<div class="scrolling-box">
<section id="1">Section 1</section>
<section id="2">Section 2</section>
<section id="3">Section 3</section>
</div>
jsFiddle
I worked on your original source code, so this simple solution is based exactly on your example. Btw it works also on mobile. I took the section content from your friend's website, you can put whatever
<html lang="en">
<head>
<title>Brickman Development: Work In Progress</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrickpfp.png?1553388536776" type="image/x-icon">
</head>
<body>
<div style="width: 100%; height: 100%; background: url('https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrick.png?1553389376285'); background-position: 48% 41%; position:relative;">
<h1 class="line-1 anim-typewriter">
<mark>Brickman Development: Work In Progress</mark>
</h1>
<section class="company-heading intro-type" id="parallax-one">
<div class="parallax" id="parallax-cta" style="background-image: url('https://www.solodev.com/assets/anchor/company-hero2.jpg');">
</div>
<div class="container">
<div class="row product-title-info">
<div style="background: #191a1d; position: absolute; bottom: 0; left: 50%" class="col-md-12">
<a class="ct-btn-scroll ct-js-btn-scroll" href="#information"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
</div>
</div>
</div>
</section>
</div>
<section style="font-size: 38px" class="container">
<div class="box-container primary row">
<div class="one-full column">
<h1 id="information"> About myself:</h1>
</div>
<div class="one-full column">
<h6>
I am Questallation, I started as a tiny bot that provided some utility commands, and some fun commands for my developer's server.
Later on, my developer decided to work on the me to have it to specialise in one server. After a few friends
wanted to me on thier servers, my developer changed the bot completely, and gave me a new name; Questallation.
I have joined many new servers, and grown since, to what you see me today.
</h6>
</div>
</div>
<div class="box-container secondary row">
<div class="one-full column">
<h1> Commands:</h1>
</div>
<div class="one-full column">
<h6>Please, come and see my commands,
over here.
</h6>
</div>
</div>
<div class="box-container primary row">
<div class="one-full column">
<h1> Credits:</h1>
</div>
<div class="one-full column">
<h6>Theese people helped to improve me, over the times which I have lived:
People over here.
</h6>
</div>
</div>
</div>
</section>
<br/>
<footer class="center box-container secondary">
<p class="no-margin"> Questallation | Excigma is not affiliated with discord in any way whatsoever |
CSS framework
</p>
</footer>
</body>
</html>
I have the following four inner div container (small picture - text - small picture - text):
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
The CSS for components-circle and inner-component:
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
The problem is, that components-circle and inner-component are overlapping the text which is on the right side of them when I resize the browser, that means the template is not responsive.
How could I insert a line break when the browser is resized or make components-circle and inner-component responsive, so that they do not overlap the corrsponding text on the right side?
Is the content of the "col-sm-12" div overlapping the content of the page, or the text next to the image that is overlapping?
Anyway, you can fix both of these issues in this way, using a "container" or "row" div and adding a css for page resizing.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
.center-text{
text-align: left;
}
#media (max-width: 765px) {
.center-text{
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
You are already using row class so just setting the width of components-circle to 100% (rather than making it static) will work (as bootstrap will handle rest of the responsive stuff).
To keep the aspect ratio of height-width you have to remove height from components-circle and use padding-top. Have a look here to see how it works. (padding-top: 100% gives 1:1 aspect ratio)
Open the below snippet in full-page view and resize to see the effect :)
Though there can be other methods to achieve the same, IMO this one is quite simple and understandable.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
padding-top: 100%;
width: 100%;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
background-size: contain;
}
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</body>
</html>
Update: To keep the inner image at the centre during resize, you have to set it's position to 0px 0px (which is default) and add background-size: contain to the inner-component. This will scale the image to fit the parent. See the updated snippet above!
To make a breakpoint that is hidden on larger viewports, you can use these CSS classes with the line break:
.d-md-none To make it invisible on anything larger than md sized screens.
.d-sm-none To hide it on anything larger than sm sized screens.
You may also need to put the row inside a container.
This is what it would look like: <br class="d-md-none">
If you want a line break without using a <br> element, check out this guide.
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
I've set up some features boxes on my home page, however the background image .../images/darker.png is only showing on the left of the image, leaving the remains of the box transparent.
Here is my CSS code for my Home-Boxes:
/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box {
float: left; display: inline; width: 314px;
background-image: url(images/darker.png);
margin-right: 19px;
}
.home-box .box-b { background-image: url(images/darker.png);}
.home-box .box-t { background-image: url(images/darker.png); padding: 10px 20px; }
.home-box h4 {
font-size: 16px; color: #36429B; font-weight: bold; text-transform: none;
}
.home-box a {
color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block;
}
.home-box img.right { margin-top: 50px; }
.cl {
display: block; height: 0; font-size: 0; line-height: 0;
text-indent: -4000px; clear: both;
}
Here is my HTML for the home boxes..
<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Control Panel</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Powerful Hardware</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Server Mod Support</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Specialized Support</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Migration Assistance</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Hardware Specs</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- end home boxes -->
As you can see the home-boxes are overlapping the footer. The footer should have about a 1 centimeter space above it so nothing overlaps it. Also, the background image for the footer is showing 2 colors but the background of the footer is only supposed to be 1 color.
Here is the image script, please refer to previous code for the image style.
bg-image="/images/darker.png".
I would appreciate any help I could get here.
For further information on this problem, here is a link to my site: http://cudahost.com/new
For the home boxes, you need to set the background to repeat:
.box {
background-repeat: repeat;
background-position: 0 0;
}
In fact, if I understand your problem correctly, the style on the inner div needs changing too. Currently you prevent the background repeating using no-repeat, instead:
.box .box-b {
background-repeat: repeat;
background-position: 0 bottom;
}