I need to align TEXT of container-fluid at same padding/margin like container.
You have example in this image:
EDIT: See 2nd photo, i want that padding to be the same on container-fluid / container, and when you minimize screen to be responsive..
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.bg {
background-color: #f3f3f3;
}
.left {
height: 650px;
}
.img-bg {
margin-right: 0px !important;
height: 650px;
background: url(http://placehold.it/850x650) no-repeat center center;
background-size: cover;
}
<section id="id1">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 nopadding bg">
<div class="left">
<h2>TEXT</h2>
</div>
</div>
<div class="col-md-5 nopadding img-bg">
</div>
</div>
</div>
</section>
Here is my solution:
HTML part:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 image no-padding">
<div class="full-width"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
</div>
CSS part:
.center-flex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
.container-fluid .text {
background: #515467;
height: 650px;
}
.container .text {
background: #737373;
height: 300px;
}
.container-fluid .image {
background: #2D2D2D;
height: 650px;
}
.full-width {
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('http://placehold.it/850x650');
background-size:cover;
}
.full-width img {
width:100%;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
You can see the jsfiddle result: https://jsfiddle.net/DTcHh/18725/
try with this below code it may help you
.text1{
background : #0f74bd;
padding : 50px;
color : white;
font-weight : bold;
}
.image{
background : #000;
padding : 50px;
color : white;
font-weight : bold;
}
.text{
background : #9ea3a9;
padding : 50px;
color : white;
font-weight : bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6 text1">
TEXT1
</div>
<div class="col-sm-6 col-md-6 col-xs-6 image">
IMAGE
</div>
</div>
</div>
<div class="container text">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
</div>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div style="background-color: blue" class="container-fluid">
<h1 style="text-align:center">Container-Fluid</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">TEXT 1</div>
<div style="text-align:center" class="col-xs-6">IMAGE</div>
</div>
<div style="background-color: yellow" class="container">
<h1 style="text-align:center">Container</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">Text 1</div>
<div style="text-align:center" class="col-xs-6">Text 2</div>
<div style="text-align:center" class="col-xs-6">Text 3</div>
<div style="text-align:center" class="col-xs-6">Text 4</div>
</div>
</div>
</div>
</body>
</html>
Is this what u want, using bootstrap
Related
I am trying to make a dice with the help of bootstrap grid. Although I am not done with it yet, here is small snippet of code containing what I have written. When I am inspecting my webpage using dev tools (picture attached), my container-fluid div which basically includes all my code is not displaying to contain the box divs?
Can you explain me why so?
I have attached my HTML and CSS code as well.
body {
background-color: rgb(41, 36, 36);
text-align: center;
font-family: 'Bungee Spice', cursive;
margin: auto;
}
h2 {
margin-bottom: 10%;
margin-top: 10%;
}
.result {
font-size: 500%;
margin: 5% auto;
}
.box {
width: 60%;
height: 180%;
/* padding-bottom: 60%; */
background-color: yellow;
margin: auto;
border-radius: 10%;
}
.container-fluid {
margin-bottom: 5%;
}
/* .circle1 {
background-color: black;
width: 100%;
height: 100%;
border-radius: 50%;
} */
/* .box-row {
width: 100%;
padding-bottom: 10%;
margin: auto;
background-color: red;
} */
#media (max-width: 1300px) {
.result {
font-size: 400%;
}
}
#media (max-width: 1100px) {
.result {
font-size: 300%;
}
}
#media (max-width: 991px) {
button {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<h1 class="result">Welcome, <span class="playerName"></span></h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"></div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>You</h2>
<div class="box">
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>Computer</h2>
<div class="box">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3"></div>
</div>
</div>
<button type="button" class="btn btn-outline-warning">Roll</button>
I see you have commented out the only style that would apply to the dots inside of the yellow boxes, but in general, the issue is that the bootstrap grid doesn't inherit any height, and the height: 100% that you have defined comes out as 0. If you would change the .circle1 height to a fixed size or apply a height to the dots row, then it would show up.
I have random numbers of columns (generated by FOR loop).
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
</div>
</div>
I would like to center last row of columns. By default very last 1 or 2 columns are aligned to left. Is there any way to center them easily, or shall I skip using "col-" and use flexbox instead?
Source: CODEPEN.IO
You can add flex style to the parent of your column, which is .row here in this example.
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
try like this.. i added align-center class to display center div
html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row align-center">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
css
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.align-center{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
Add this to the 4th div like so <div class ="col-sm-offset-2>
I want to center two divs, into another div (horizontally). Can someone tell me how can I do it, in the bellow code? I want to have the two divs with the classes box-left and box-right, in the middle of the div with the class outer:
<html>
<head>
<style>
.container{
background-color: blue;
}
.outer{
text-align: center;
}
.width-600{
width:600px;
text-align:left;
margin-right: auto;
margin-left: auto;
}
.box-left{
background-color: yellow;
}
.box-right{
background-color: green;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="outer">
<div class="row width-600">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
</body> </html>
You can use display:flex and justify-content:center on .outer class ,would center the two rows
check the following snippet
.container {
background-color: blue;
}
.outer {
display:flex;
justify-content:center;
}
.width-600 {
width: 400px;
}
.box-left {
background-color: yellow;
}
.box-right {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="outer">
<div class="row ">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
replace this body in your html and see if it works for you..
<body>
<div class="container">
<div class="row width-600">
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"></div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-left">left</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-right">right</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
</div>
</div>
</div>
</body>
I have the following 4 squares (two rows and two columns):
<section id="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
I would like them to be displayed in a 4 square fashion and that the grid takes the whole width and height of the page. I also want it to be responsive and I don't want any spaces between each square.
I tried setting the css on my section tag like this:
section
{
height: 100vh;
}
But that had no effect. Does anybody know how to achieve this please?
Thank you
Try this as the CSS
section#gallery
{
height:100%;
width:100%;
}
div.row
{
height:50%;
}
div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
width:50%;
}
I think you are looking for something like this? https://jsfiddle.net/01djtnyd/
note: I changed all classes to "-6" so you can see it work easily in the fiddle
add class no-padding to the divs that are wrapping the img div
in the css add this:
.no-padding {
padding: 0 !important;
margin: 0;
}
.no-padding > div {
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
You can do this with css flexbox and jQuery. Here are two options to maintain the square shape of each div.
Option 1:
HTML:
<section id="gallery">
<div class="container-fluid">
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Jquery:
$(document).ready(function(){
var grid_w = $(".grid-block").width();
$(".grid-block").height(grid_w);
});
Fiddle: https://jsfiddle.net/puxLmy1y/2/
Option 2 (without jQuery):
HTML: Same as above
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
width: 50vh;
height: 50vh;
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Fiddle: https://jsfiddle.net/puxLmy1y/3/
I want to create equal padding with all div under the .slideshow div. The problem is the last div right padding.
Now looks like this:
I want this, just with equal padding / space between divs and equal img heights:
The code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="product-container">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.product-container{
padding: 0px 9%;
}
.slideshow{
background-color: #efeff1;
border: 1px solid #c5c5c7;
overflow: hidden;
}
.product-container img{
width:100%;
}
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Fiddle:
Fiddle
Just wrap all your image containing divs in additional .row:
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
And remove unnecessary styling:
.col-lg-3{
padding-right:12px;
padding-left:0px;
}
Also, you don't need to repeat responsive classes for all devices:
<div class="col-sm-3 col-md-3 col-lg-3"></div>
Can be written:
<div class="col-sm-3"></div>
Updated fiddle
Is this what you're trying to acheive?
.product-container {
padding: 0 2px 6px 2px;
overflow: hidden;
}
.slideshow {
background-color: #efeff1;
border: 1px solid #c5c5c7;
padding-left: 20px;
}
.product-container img {
width: 100%;
}
.product-container .pads {
padding: 0px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-lg-12">
<div class="product-container">
<div class="row">
<div class="slideshow">
<p>Test message, Test message</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 pads">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
</div>
</div>
</div>
</div>
I used the last-child selector. "Bla" is a class I added to the divs in question
.bla:last-child{
padding-right:0px ;
}
Had some issues with the height but used display: flex; to deal with that.
This wont work well in older browsers
http://jsfiddle.net/52VtD/12065/
If the right padding is removed it will have the result you are looking for.
http://jsfiddle.net/0rm0h547/light/
http://jsfiddle.net/0rm0h547/show/
css
.continuous {
padding-right: 0px;
}
html
..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
<img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
</div>
..
Add an extra css class that removes padding-right.
You can give padding-right:0px; and you will get wat you want.
http://jsfiddle.net/52VtD/12070/
.col-lg-3{
padding-right:0px;
padding-left:0px;
}
Try:
remove
.col-lg-3{
padding-left:12px;
padding-right:0px;
}
add
.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}