I'm try to do a footer with bootstrap and I need move a span element, this one is whitin of a column set up it with col-sm-4 class, How do I can move this one for instance 20px whitout affecting responsive design. Below I put a image about footer and the html structure and css. I appreciate any help.
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div id="location" class="col-sm-4 col-xs-3">
<span>Location</span>
</div>
<div id="info" class="col-sm-4 col-xs-3">
<span>Info about me</span>
</div>
<div id="created" class="col-sm-4 col-xs-3">
<p>texto</p>
</div>
</div>
</div>
</footer>
css:
.footer{
position: fixed;
bottom:0%;
height: 100px;
width: 100%;
background-color: #2c3e50;
}
#location{
background-color: white;
height: 50px;
}
#info{
background-color: gray;
height: 50px;
}
#created{
background-color: blue;
height: 50px;
}
You can use <span style="padding-left:20px;">move space 20px</span>
It will not affect responsiveness
Related
I'm trying to get the div with the product name amount price and total to the top of the div it's nestled in, but changing the position isn't working. Stuff like vertical alignment didn't work for me either. I made a screenshot of the page, the buttons are in the right place, it's just the sort of table that has to move to the top of the screen. This has to contain all kinds of products later on.
this is the html:
<div class="checkout">
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!-- Added products overview-->
<div class="checkoutTable">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
<hr style="background-color:white;">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
</div>
<!-- -->
<!-- Buttons -->
<div class="row">
<a class="checkoutBtn" href="">
<div class="col-12 checkoutBtn">
<i class="fa fa-shopping-cart"></i> Checkout
</div>
</a>
</div>
<div class="row">
<a class="addDiscountBtn" href="#">
<div class="col-6-xs addDiscountBtn">
% Add Discount
</div>
</a>
<a class="cancelBtn" href="#">
<div class="col-6-xs cancelBtn">
<i class="fa fa-ban"></i> Cancel
</div>
</a>
</div>
</div>
</div>
This is the css:
.checkout{
background-color: #22303e;
height: calc(100vh - 50px);
color: white;
font-size: 13px;
}
.checkoutBtn{
background-color: #0090e3; height: 50px;
text-align: center;
line-height: 50px
}
.addDiscountBtn{
background-color:#f8ac59; height: 50px;
text-align: center;
line-height: 50px
}
.cancelBtn{
background-color: #ed5565; height: 50px;
text-align: center;
line-height: 50px
}
a.checkoutBtn{
width: 100%;
color: white;
}
a.addDiscountBtn{
width: 50%;
color: white;
}
a.cancelBtn{
width: 50%;
color: white;
}
a:hover{
text-decoration: none;
opacity: 0.9;
}
.checkoutTable{
vertical-align:top;
}
For container-fluid, do not use any inline styling like you are using style="position: absolute; bottom: 0;"
Example
<div class="checkout">
<div class="container-fluid"></div>
You are placing your div
<div class="checkoutTable">
in parent div
<div class="container-fluid" style="position: absolute; bottom: 0;">
And here the style= "bottom: 0;" that is making everything in it to go at the bottom of the page.
<div class="checkoutTable">
<!--content-->
</div>
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!--content-->
</div>
there is more than one solution for this issue
you can add position like
.Class {
position : absolute;
top : 0;
}
.Class {
position :fixed;
top : 0;
}
I am absolute newbee and wanna create 2 rows. One with 2 img col-4 size and col-8 size and the other row à 3 x col-4 size.
My problem is that the col-8 img is a little bit bigger (height) then the col-4 img.
How can I fix it? I tried a lot but nothing worked.
Thanks for your help.
[problem
.col-4 {
padding-left: 5px;
padding-right: 5px;
}
.col-8 {
padding-left: 5px;
padding-right: 5px;
}
.x1 {
border: 1px solid black;
}
.x2 {
border: 1px solid black;
}
.x1_pic {
width: 100%;
height: auto;
position: relative;
}
.x2_pic {
width: 100%;
height: auto;
position: relative;
}
.x1_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
.x2_header {
position: absolute;
margin-top: -95%;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-8">
<div class="x2">
<img class="x2_pic" src="./img/maschine_2.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
<div class="col-4">
<div class="x1">
<img class="x1_pic" src="./img/header-background.jpg">
</div>
</div>
</div>
</div>
]1
I'm trying to make a website with multiple sections and I'm encountering an issue in adding padding to the sections. I try to put the padding in the container, but it doesn't affect the individual divs. If I try to do it to the divs, it does it inside and the borders still touch. If I try and put the divs in more divs, it just doesn't go well. Whats going wrong? I'll show you my relative code:
.container {
width: 100%;
height: auto;
padding-top: 5%;
padding-right: 2%;
padding-left: 2%;
}
.secbox {
float: left;
width: 48%;
height: auto;
border: 5px solid red;
padding-top: 2%;
}
<div class="container">
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
</div>
<div class="container">
<div class="sec">
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
</div>
<div class="sec">
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
</div>
</div>
.container {
width: 100%;
height: auto;
border: 5px solid red;
display:table
}
.sec{
width:50%;
float:left;
box-sizing:border-box;
}
.secbox {
border: 5px solid red;
height: 20px;
margin:5px
}
Sample : Demo Link
I have been writing some code for a website, and I'm not able to vertically center text. I have read multiple answers on StackOverflow and other sites about how to vertically center html (mainly using the display:table and display:table-cell methods and the top:50%, transformY method), however, I am not able to implement either of these methods successfully. I have attached my code here, hoping that someone will be able to spot an error of my mine which is causing the code to not work. (In this code, I have used the top:50%, transformY method of vertically centering text). Any help would be greatly appreciated.
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<title>Game Timer and Scorekeeper</title>
</head>
<body>
<div class="container-fluid">
<div class="row" id="heading">
<div class="col-xs-12">
<div class="positioner">
<h1>Game Timer and Scorekeeper</h1>
</div>
</div>
</div>
<div class="row" id="top-labels">
<div class="col-xs-3 labels teamlabel" id="a-label">
<div class="positioner">
<h2>Team A</h2>
</div>
</div>
<div class="col-xs-6 labels" id="gameclock-label">
<div class="positioner">
<h2>Game Clock</h2>
</div>
</div>
<div class="col-xs-3 labels teamlabel" id="b-label">
<div class="positioner">
<h2>Team B</h2>
</div>
</div>
</div>
<div class="row" id="thirdrow">
<div class="col-xs-3 pointsclock teampoints" id="pointsA">
<div class="positioner">
<h1>POINTS A</h1>
</div>
</div>
<div class="col-xs-6 pointsclock" id="gameclock">
<div class="positioner">
<h1>GAME CLOCK</h1>
</div>
</div>
<div class="col-xs-3 pointsclock teampoints" id="pointsB">
<div class="positioner">
<h1>POINTS B</h1>
</div>
</div>
</div>
<div class="row" id="fourthrow">
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
<div class="positioner">
<h2>CONTROL A</h2>
</div>
</div>
<div class="col-xs-6 ptcontclock" id="questionclock">
<div class="positioner">
<h2>QUESTION CLOCK</h2>
</div>
</div>
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
<div class="positioner">
<h2>CONTROL B</h2>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container-fluid {
width: 100vw;
height: 100vh;
}
#heading {
height: 15vh;
border: 2px solid;
}
#top-labels {
height: 10vh;
border: 2px solid;
width: 100vw;
}
#top-labels .labels {
border-right: 2px solid;
border-left: 2px solid;
}
#thirdrow {
height: 40vh;
border: 2px solid;
width: 100vw;
}
#thirdrow .pointsclock {
height: 40vh;
border-right: 2px solid;
border-left: 2px solid;
}
#fourthrow {
height: 35vh;
width: 100vw;
}
#fourthrow .ptcontclock {
border-right: 2px solid;
border-left: 2px solid;
height: 35vh;
}
.positioner{
height:100%;
width:100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
You can try this.
HTML
<main>
<div>
I'm a block-level element with an unknown height, centered vertically
within my parent.
</div>
</main>
CSS
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
check this link for reference https://css-tricks.com/centering-css-complete-guide/
I am using Bootstrap and trying to center 3 div blocks using the bootstrap 12 columns style. So each div takes up 4 columns. I want some spacing between these columns thus I added 10px margin to the right. This pushes down the 3rd div to the next row. How do I get my spacing and still keep all 3 columns on the same row?
HTML
<div class="container">
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
</div>
CSS
.cust_box{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*Line that causes issue*/
}
Problem recreated in CodePen
Place your class cust_box inside the the column. The h3 has margin so that may also be interfering with your layout. You may also want to just use the row class instead of form-group.
See working Example Snippet. (colors added so you can see what's actually happening)
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
.red {
border: 2px solid red;
}
.yellow {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row yellow">
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
Example without Color
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
with the additional margin you are destroying the bootstrap grid system.
have you tried using padding instead of margin?
apart from this you can customize bootrap a lot!
have a look on this:
http://getbootstrap.com/customize/#grid-system
EDIT:
i looked at your code and saw your struggle:
use a inner div like this:
<div class="form-group col-sm-4 col-lg-4 cust_box">
<div class="inner">
<h3>Something</h3>
</div>
</div>
and use your style on the inner div:
.cust_box .inner{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*should not be an issue anymore*/
}