I'm trying to center 3 boxes, with abit of space (gutter?) between them and also space from corner of page.
I tried class="col-sm-2 col-md-offset-1" (col-sm-2 to make them smaller, and offset 1 for the gap), but its not really centered to the middle of the page, and also on mobile each col is "streched" to the corners and i dont want that.
any ideas?
thanks!
You need text-center
.grid3 >div{
height: 200px;
background: rgba(0,0,0,.4);
float: none;
display: inline-block;
background-clip: content-box
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center grid3">
<div class="col-xs-3">.col-md-4</div>
<div class="col-xs-3">.col-md-4</div>
<div class="col-xs-3">.col-md-4</div>
</div>
You can wrap your content in a .well. Then the padding of the columns will be your gutters. Also, you cannot use .col-sm-3 if you want 3 columns to be centered.. you would have to use .col-sm-2 or .col-sm-4
<div class="col-sm-4">
<div class="well">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
http://www.bootply.com/CUbF8SQg8q
Related
I'm using bootstrap columns to display expanding cards. When one expands though, it pushes the whole row underneath it down.
Unexpanded:
Currently how it behaves expanded:
How I'd like it to behave:
I've been reading about flexbox, but I cant find any good examples of the desired behavior, while maintaining responsive design.
Currently the code is along the lines of
<div class="row">
<div class="col-xl-4 col-lg-5 col-12">
expanding content...
</div>
.
.
.
<div class="col-xl-4 col-lg-5 col-12">
expanding content...
</div>
</div>
Maybe you could try giving it a css height: property. This can be done through Javascript, so when you're expanding the box, also give it a certain height to limit it. Tell me if you'd like me to do it for you :)
I see 2 possibilities:
1. Solution: Have you checked out the bootstrap-component card-columns? It organizes the cards into Masonry-like columns.
By using
.card-columns {
#include media-breakpoint-only(lg) {
column-count: 4;
}
#include media-breakpoint-only(xl) {
column-count: 5;
}
}
you can make them responsive.
2. Solution:
You use just 3 cols:
.row {
margin-top: 20px;
align-content: flex-start;
}
.card {
padding: 10px;
margin-bottom: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
<div class="col-4">
<div class="card">
Lorem
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
<div class="col-4">
<div class="card">
Lorem
</div><!-- card -->
<div class="card">
Lorem
</div><!-- card -->
</div><!-- col -->
</div><!--row -->
Ok, so after some trial and error I managed
--HTML--
<div id="redDiv" style="background-color: red; height: 100px; width: 10%; float:
left;">
<p>This is a div</p>
</div>
--JavaScript--
var onWindowLoaded = () =>{
document.getElementById("redDiv").setAttribute("style", "height: 150px; background-
color:red; width: 10%;");
}
window.addEventListener("load", onWindowLoaded);
So it's important to note that I used a red background in order to tell how long my div was, I see you're using a greyish background (It was hard to see them to be honest). So basically once the page loads it will set the div to the height indicated in the setAttribute() function, I had to re-add the colour because modifying the div height through javascript made the colour disappear completely. Hope this helps :)
When overriding css values while working with bootstrap try using
!important
For example:
row {
height: 150px !important;
}
I have this set up on desktop with a headline on the left and an image on the right. When I collapse the browser less than 880px, I want the image to be centered underneath the headline.
I am struggling with getting the image centered & underneath the headline.
I am fairly new to html/css so any tips would be greatly appreciated.
Fiddle: https://jsfiddle.net/o7k5qgne/1/
<section class="hero">
<div class="hero-inner">
<h1>Lorem ipsum dolor<span class="blue-dot">.</span></h1>
</div>
<div class="split split-right">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
</section>
<div class="clients">
<h2>Lorem ipsum dolor & sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</p>
</div>
Try using CSS media Query to detect where (breakpoint) you want the DIVs to stack. See the example below and adjust as needed.
.myDiv {
height: 150px;
width: 150px;
display: inline-block;
background-color: orange;
margin-bottom: 25px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */
#media screen and (max-width: 320px) {
.myDiv {
width: 90%;
display: block; /* Stops it from floating */
margin: auto; /* Ensures that it is centered */
margin-bottom: 25px; /* Space between the stacked elements */
}
}
<div class="myDiv"></div>
<div class="myDiv"></div>
More on CSS Media Query
See it here in action. Resize the browser to see how it works.
Problem is with your css. Here I edited your css just to the once that need to make the image and headline responsive.
[https://jsfiddle.net/ss123/a7q834sL/1/][1]
Styling like you are expecting can simply be achieved by using css flex box. To do that you must first put the content inside a container and make it display:flex. Then you can use the flex styling for the content inside the container.
flex-direction:column will stack the content over. flex-direction:row will put the content in a single row. jstify-content:space-venly will justify the content elements with exactly even spaces between them.
You are on the right track here with the media queries you have in place. I would avoid using the absolute positioning on the image, it will get set exactly where you tell it to and not be very flexible. Centering can be done in several ways like with flex box as others have mentioned, or even just throwing a text-align: center on its' parent element. With your media queries on mobile, be weary of padding or vh/vw that you have in place from desktop, you may not want those still in place when you get to a small screen size; looks like in your example you would want to remove padding and the vh on mobile. Also, to help your CSS be a bit easier to manage I would recommend putting your media queries right inside the class to avoid repeating a lot of code, like so:
.hero-inner {
/* Flexbox Stuff */
display: flex;
align-items: center;
/* Text styles */
text-align: left;
width: 50px;
#media only screen and (max-width: 880px) {
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</p>
</div>
</div>
</body>
</html>
I finally figured out how to make the jumbotron image fit the entire width and HEIGHT of a user's browser:
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
Now, when I add another section div class = row, the columns to not show up underneath the jumbotron image. Instead, they show up on the top of the page and overlap the jumbotron text. JS Fiddle: http://jsfiddle.net/srLngrsx/
I isolated each CSS property above and found out that position: fixed is causing this to happen. When I remove position: fixed the columns line up underneath like they should, but the jumbotron image is now a smaller size, not fitting to the screen.
Can anybody identify or explain why exactly position: fixed is causing the other elements to not position properly? How can I make it so the jumbotron header fits the width AND HEIGHT of the page, and the rest of the content shows up below?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Is this what you need?
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
top: 0;
left: 0;
min-width: 100%;
min-height: 100vh;
}
Fiddle
http://jsfiddle.net/srLngrsx/3/
Move your jumbotron in the container and give it a row and full-width column.
http://jsfiddle.net/srLngrsx/1/
<div class="container">
<div class="row">
<div class="col-xs-12 jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
...
when you use position:fixed for any element , you have to use margin-top for the elements after it . in this example you have to use margin-top for the class row . because the elements after the fixed positioned element will start from the top position of the fixed element.
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.row {
margin-top:300px;
}
http://jsfiddle.net/srLngrsx/4/
I have an image as a background with a div overlaying it. I'm trying to find ways to make it responsive and cover more of the picture as it gets smaller. I'm tried the below but I don't think even the column classes are doing what they are supposed to do.
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12"
<div id="test-container">
<img src="images/productsplash.jpg" alt="Home Page" class="img-responsive"/>
<div class="row">
<div class="col-lg-4 col-md-9 col-xs-12" id="products-container">
<div class="op-container col-lg-12 col-md-12"><h1>OUR PRODUCTS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</p>
</div>
<div class="col-lg-6 col-md-6" id="button-good"><p>Good <br>Products</p></div>
<div class="col-lg-6 col-md-6" id="button-bad"><p>Bad <br>Products</p></div>
</div>
</div>
</div>
</div>
#test-container {
position:relative;
display:inline;
}
#products-container {
position:absolute;
min-width:30%;
max-width:40%;
top:35%;
left:55%;
background-color: blue; /* currently missing opacity css*/
}
I had a thought of using media query to override the css for #products container. Couldn't get it to work. I essentially want it to cover half the div at something in the tablet range size and then overlay the picture completely.
Any thoughts on how to tackle?
You might putting the image as a background-image to a div, and setting the background-size to cover or contain.
The div should have the same classes as the covering div eg: col-lg-4 col-md-9 col-xs-12
Something like
HTML
<div class="col-lg-4 col-md-9 col-xs-12 responsive-image"
style="background-image: url(/dynamic/image/url.png)">
</div>
CSS
.responsive-image {
background-size: cover; /* or contain */
background-position: center center;
height: 300px; /* or 25vh - 25% of viewport height */
}
The only drawback is that you have to control the height of the image div, because on its own it won't automatically expand to best fit the image
Also see viewport units compatibility
I've noticed that StackOverflow resorted to using a table-based layout for the comments area beneath posts:
Notice how the text all stays to the right of the button area, regardless of how many lines of text there are. I am trying to accomplish the same effect using a table-less layout, and failing miserably. Is there any good way to do achieve this without tables?
I think this is a good start:
<div class="comment-row">
<ul class="icon-set">
<li class="icon-1">icon</li>
<li class="icon-2">icon</li>
</ul>
<div class="comment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
CSS:
.comment-row { position relative; }
.icon-set { position: absolute; }
.icon-set a {
display: block;
text-indent: -99999px;
border: 1px solid;
width: 16px;
}
.comment { margin-left: 30px; }
Live Sample:
http://jsfiddle.net/HPbFJ/
.sidebyside { float: left}
<div class="sidebyside">
<input type="button" value="VoteUp" /><br />
<input type="button" value="Flag" />
</div>
<div class="sidebyside">Text</div>
Isn't it just as simple as this?
EDIT
Your example (fixed):
<div style="overflow: hidden;">
<div style="float: left;">Left Content</div>
<div style="float: left; width: 100px;">Right Content Right ContentRight Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content </div>
</div>
Alternate solution: http://jsfiddle.net/7JukV/
Just for the sake of alternatives... :)