I am having problem in designing the footer same as in the image. I am new in css and bootstrap thats why don't have much knowledge. I want to design the given footer only for mobile view. For desktop the image will be different.I am confused with the horizontal partition because it will have vertical partition in desktop
My code for desktop view is:
.btn-font {
color: white;
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row " style=" background-color:#F2F2F2;">
<div class="col-xs-12">
<div class="container ">
<div class="row footer-border " style="margin-top: 6em; border-right: 2px solid #ccc;">
<div class="col-md-4 col-xs-12 ">
<button class="btn btn-success button-def form-text btn-font" id="button" type="submit" name="go" style="margin-top: 1.2em; height: 50px; ">Get started with MMN free</button>
</div>
<div class="col-md-8 col-xs-12 ">
<p class="slider-heading " style="margin-top: 1em;">Discover what technology can do for your NGO.</p>
</div>
</div>
<div class="row" style="margin-top: 5em; ">
<div class="col-xs-12 footer1">
<p>ManageMyNGO</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 footer2">
<p>a ColoredCow product</p>
</div>
</div>
</div>
</div>
</div>
Use a CSS border. In mobile, make it a top or bottom border (so it is horizontal), and on desktop make it a left or right border (so it is vertical) with a #media query.
You may want to practice using % when inputting css. e.g.
border-right: 1%
style="margin-top: 1.3%; <br/>
As using px and em may usually damage your css from different sizes of screen.
Related
So, I have to create this Page where in you get text alongside image displayed as seen in here
But , on minimising the window size the image gets overlapped as seen here
<div class="header1">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
</div>
</div>
and Here is the css
.hedtext {
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt;
font-size: 13px;
font-weight: 750;
float: left;
}
.header1 {
border: 1px solid black;
height: 150px;
}
.img1 {
width: auto;
height: 130px;
padding :10px;
}
Also, using bootstrap 3 . All i want is that the image goes side by side the text on minimising the window size .
First you have forgot to add the .row class div which bootstrap requires to wrap around the columns to work correctly.
I removed .pull-right and instead just added text-right to the column. You can also use floats though or whatever to set the image to the right side however you wish.
<div class="header1 row">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4 text-right">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
class="img1">
</div>
</div>
You have to wrap col in row
Remove the .hedtext - float (bootstrap worry about float)
Remove .header1 height: 130px; (It the reason image out of border)
See working code
.hedtext {
line-height: 2pt;
font-size: 13px;
font-weight: 750;
}
.row {
border: 1px solid black;
}
.img1 {
width: auto;
height: 130px;
padding: 10px;
}
<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>
<div class="container">
<div class="row">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
<h4 class="hedtext">Address</h4>
<h4 class="hedtext">Contact Number</h4>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1">
</div>
</div>
</div>
you have to add responsive class in div like col-xs-* for responsive
do this for your solution
<div clss="row">
<div class="header1">
<div class="col-md-8 col-xs-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4 col-xs-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
class="pull-right img1">
</div>
</div>
</div>
I have a problem with some cards I've made with Bootstrap. Here's the code:
formacion {
color: white;
position: relative;
}
.formacion .puesto {
position: relative;
z-index: 1;
}
.formacion .puesto img{
margin-top: 10px;
}
.formacion .empresa {
width: 100%;
position: absolute;
top: 52px;
background: rgb(255, 255, 255);
color: #000;
z-index: 0;
}
<div class="col-md-4 col-sm-4">
<h2>Formación<br><small>Experiencias académicas destacadas</small></h2>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #8224e3">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-14.50.26-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Ingeniero en informatica</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e688ff">
<h4 class="text-center col-sm-offset-3">Universidad<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-09-2004 - 01-04-2011 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #81d742">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-15.41.22-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Curso 1</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e5ffa6">
<h4 class="text-center col-sm-offset-3">La institución<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-10-2016 - 31-10-2016 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
This code makes my divs look like this:
When they have to show like this (achieved by adding a fixed height to .capsula-formacion, but I don't want to put it because some of the divs could be longer than others):
I have always the same problem when I'm using absolute positioning so I'm assuming I'm doing it wrong. Which's the way to achieve my desired layout? Thank you in advance!!
Don't put absolute position in content div. You can manage image by position absolute.
You can set image by minus position and also you can set image width and height.
In responsive view you can manage image width and height by break point(Media query css).
I have a div that goes to the edge with the browser and would ilke to add content that is aligned to the centered container in the center of the page. I've crated a row with a col-md-6 that I filled with a background color but when I add the container, the content gets aligned to the edge of the browser not to the container's edge.
I am using Bootstrap and really need your help. If I did not articulate the issue properly, I've attached an image that should help.
Thanks for your help.
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
Image shows the current situation and the desired situation
As you did a margin-top for the .login-msg-box, you could for example add a margin-left to your .container. Here's the result :
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
.container {
margin-left: 200px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
You can add any number of offset to div
<div class="row">
<div class="col-md-6 col-md-offset-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
I think you are looking for something like this https://jsfiddle.net/neya0v76/1/
I switch everything to xs so it looks right in the fiddle and just restructered your html
<div class="row">
<div class="col-xs-6 login-msg-box">
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<h2 class="msg-heading-line">LOG IN</h2>
<input type="text"/>
<input type="text"/>
</div>
</div>
</div>
I tried to look at other stack questions about adding spacing between columns in bootstrap, but I don't seem to find the right answer to my issue. Basically what i want is to have 2 buttons one at the far right and one at the far left on desktop/tablet (and I managed to do that) but then on mobile the buttons will have to go one below the other, will have to be centered and will need to have some space in between (and that's where I can't find a solution). Please note that I'm using an editor where I can add html and/or bootstrap code only, so any css will have to be in the html.
Here is the code I used so far:
<div class="raw">
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-left" href="">Becoming an au pair</a></div>
<div class="col-md-6 col-sm-6 col-xs-6"><a class="btn btn-primary pull-right" href="">Becoming a host family</a></div>
</div>
Thanks!
https://jsfiddle.net/m00durk3/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 text-left">
<div class="btn">
Left Button
</div>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<div class="btn">
Right Button
</div>
</div>
</div>
</div>
CSS:
.btn {
background-color: lightblue;
}
#media screen and (max-width: 767px) {
.btn {
width: 100%;
margin-bottom: 5px;
}
}
So basically you need to use the grid to wrap the outermost columns. Once thats done you need to add a media query that changes the width of the buttons to fill the screen.
In the jsfiddle link make the html sections width bigger or smaller to see the changes take effect.
Edit: Full code showing how to put styles on the same page as the html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn {
background-color: lightblue;
}
#media screen and (max-width: 767px) {
.btn {
width: 100%;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 text-left">
<div class="btn">
Left Button
</div>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<div class="btn">
Right Button
</div>
</div>
</div>
</div>
</body>
</html>
I actually managed to fix it with the following code. Thanks for putting me on the right track Bioto
<div class="row">
<div class="col-md-6 col-sm-6 text-left">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/au-pair" style="margin-bottom:10px;">Becoming an au pair</a></div>
</div>
<div class="col-md-6 col-sm-6 text-right">
<div class="col-xs-12 text-center"><a class="btn btn-primary" href="https://kangaroo-staging.devguru.co/en/ireland/host-family" style="margin-bottom:10px;">Becoming a host family</a></div>
</div>
</div>
It works fine in big screen but on the mobile it's broken to two lines. One image on the left the other on the right.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 r">
<img src="img/qr.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
<div class="col-md-6 l">
<img src="img/weixin.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
</div>
</div>
CSS
.l{text-align: left; padding-top: 10px;}
.r{text-align: right; padding-top: 10px;}
You can use float:
HTML:
<center>
<div class="container">
<div class="row">
<div class="col-md-6 r">
<img src="img/qr.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
<div class="col-md-6 l">
<img src="img/weixin.gif"> <br />
<p><small>HERE IS TITLE</small></p>
</div>
</div>
</div>
</center>
CSS:
.l{display: block; padding-top: 10px; float: left; }
.r{display: block; padding-top: 10px; float: right;}
http://jsfiddle.net/2jag6/
try using .pull-right on first image and .pull-left on second image. no reason to create all new classes for classes already available in bootstrap.
To keep both images in the same row in mobile view too, just add the bootstrap class col-xs-6 class next to col-md-6 class in your both divs, like:
<div class="col-md-6 col-xs-6">