Hi guys so i am using bootstrap and i have figured out how to put stuff on the right and left hand side of my footer, but i am not sure how to stick something in the middle
HTML:
<div class="footer">
<div class="container">
<div class="navbar-text pull-left">
<div class="logo1">
<p style="font-size: 24px; font-weight: 900; color: #F8BD23;">here</p>
<p>a,<br>
b,<br>
c,<br>
d<br></p>
</div>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i><i class="fa fa-instagram fa-2x"></i>
</div>
</div>
</div>
CSS:
.footer {
background-color: black;
padding-top: 10px;
}
.navbar-text > a {
color: #FFF;
padding: 5px;
}
.logo1 p {
color: #FFF;
margin-top: 2px;
}
Sorry just to clear up confusion, i want 3 columns basically So it should look like
Col 1 Col 2 Col 3
Fixed my own problem i guess just used a row and stuck 3 coloums in ,
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
Had no idea i could use that in the footer, thanks again for the help x
Try like this:
Adding the "text-center" class to the container. So you will end up with this:
<div id="footer">
<div class="container text-center">
<p class="text-muted credit" style="color:#fff">xyz</p>
</div>
</div>
Related
Supposed I have a horizontal list:
About Admissions Academics Research News Events
I want them to be n-unit apart from the proceeding word based on their length.
| About | Admissions | Academics | Research | News | Events |
The illustration above is essentially the heart of my question. How can I make the words equidistant from each other? How can I vary the area of the rectangles in order to create equidistance?
For example, "Research" will have a much greater area than "News" but their distance is the same as the words such as "About" and "Admissions" and "Admissions" and "Academics".
.school_info {
background-color: black;
text-align: center;
}
.school_info_row {
margin: 0 10% 0 10%;
width: auto;
padding-bottom: 15px;
}
.public_info_container {
padding-left: 0;
padding-right: 0;
}
.public_info {
font-size: 20;
font-family:'Cinzel', serif;
color: white;
width: 150px;
}
<div class="school_info">
<div class="row school_info_row">
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">About</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Admissions</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Academics</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Research</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">News</a>
</div>
<div class="col-lg-2 col-md-4 public_info_container">
<a class="public_info" href="">Events</a>
</div>
</div>
</div>
</div>
You almost got it. Bootstrap column totals must add up to 12. Your col-lg-x is correct, it adds up to 12, your col-md-x needs to have value 2 as well. Since both lg and md media-breakpoints use the value 2, you can just replace it with col-2. I'm assuming this is bootstrap because those are bootstrap classes. Bootstrap also has mx-auto class so you can make the margins on the x-axis equidistant.
.school_info {
background-color: black;
text-align: center;
}
.public_info {
font-size: 20;
font-family:'Cinzel', serif;
color: white;
/*width: 150px;*/
}
.hilite {
border-left: 1px solid red;
border-right: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="school_info">
<div class="row">
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">About</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Admissions</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Academics</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Research</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">News</a>
</div>
<div class="col-2 hilite">
<a class="public_info mx-auto" href="">Events</a>
</div>
</div>
</div>
</div>
Hi guys so i have a background image with 5 small divs in it. I was wondering what is the best way to center the 5 divs in the middle of the image. I for some reason cant find a way to put it in the middle without using margin-left: 300px or something like this. I tried to use div align in the row but that doesn't work is well
HTML:
<div class="parallax2">
<div class="info1">
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2" >
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4 id="three" >LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>
CSS:
.parallax2 {
background-image: url(https://wallpapercave.com/wp/e7KiEL3.jpg);
min-height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 10px 20px;
}
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: black;
}
I tried to add Margin-left: 200px in the work process class but i wasent sure if this is the correct way to do it.
Any help would be great
Link
#RonTheOld, you can turn your row into a flexbox by giving it the diplay:flex; property and 'justify-content: center' property to center the items in the flexbox.
I've done this as an inline style attribute on the row element for your code.
Here's a codeply project with the code in action.
I am using bootstrap for my column structure and want to draw a horizontal line between the columns:
<div class="col-md-2 col-xs-12">
<div class="col-md-2 icon">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
<div class="col-md-10 height hidden-xs">
<p>mycomp account number</p><span class="text">2000299999940</span>
</div>
<div class="visible-xs height">
<hr>
<p class="col-xs-5">mycomp account number:</p>
<p class="col-xs-7">2000299999940</p>
</div>
</div>
<div class="col-md-1">
<hr class="line" />
</div>
css:
.line {
width: 200px;
height: 3px;
background-color: #dadada;
margin-right:40px;
}
Because of the bootstrap columnstructure there are margins involved, but how can I make the line without all the space ie make it wider? Codepen here
well in case you want to ignore the default padding and margin in bootstrap make a class in css file as
.no-padding-margin
{
padding:0px;
margin: 0px;
}
and then apply this class to your bootstrap columns as
<div class="col-md-2 col-xs-12 no-padding-margin">
<div class="col-md-2 icon">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
<div class="col-md-10 height hidden-xs">
<p>mycomp account number</p><span class="text">2000299999940</span>
</div>
<div class="visible-xs height">
<hr>
<p class="col-xs-5">mycomp account number:</p>
<p class="col-xs-7">2000299999940</p>
</div>
</div>
<div class="col-md-1 no-padding-margin">
<hr class="line" />
</div>
well as i understand you just want your line to be longer .
so why don't you remove the paddings from the col the line is in. and also add width:100% on the .line if you want.
code :
.line {
width: 100%;
height: 3px;
background-color: #dadada;
}
.col-md-1 {
padding-left:0;
padding-right:0;
}
I'm trying to use Bootstrap 3 to make a grid-based template for a modal (which I'm also using Bootstrap for). The modal appears, and all the content is there ... but the styling is off. It looks like the row classes don't fill their parent containers, even though there's no styling that should make that happen. Here's a screenshot - you can see that neither the row in the header nor the row in the body take the width of their parent. I've tried poking around other SO posts for information, but I can't seem to find anything on why a row wouldn't fill its parent width.
Update:
Here's a JSFiddle. It looks like it actually works on JSFiddle ... which means it's not a problem with the immediate template, so I'm looking into other possible causes. Thanks for the tip, calvin!
HTML
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ht-modal-header">
<h1>
Bombay Teen Challenge
</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<address>
1 Chium Village, Ambedkar Road<br/>
Bandra West<br/>
Mumbai 400052
</address>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<abbr>e: </abbr> kkdevaraj#bombayteenchallenge.org<br/>
<abbr>p: </abbr> +91 22 2604 2242
</div>
</div>
</div>
<div class="modal-body ht-modal-body">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="types">
<span class="prevention-label"></span> Prevention, Education, Teen
</div>
<div class="facebook">
<span class="fa fa-facebook-square fa-2x"></span> BombayTeenChallenge
</div>
<div class="twitter">
<span class="fa fa-twitter-square fa-2x"></span> #BombayTC
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="people">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<label>People: </label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Dr. Rama R. Rao<br/>
Monte Hackney
</div>
</div>
</div>
<div class="partners">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<label>Partners: </label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
None Available
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
LESS
.prevention-label {
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
background-color: #4ECDC4;
}
.ht-modal-header {
a {
&:hover, &:focus {
color: white;
}
color: white;
}
color: white;
background: linear-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -webkit-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -o-linear-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -moz-linear-gradient(#ht-teal, darken(#ht-teal, 5%));
}
If you nest rows in columns you must understand that inside a .col-lg-6 .row the whole thing starts new (at 100%) and for you you to fill it have to use .col-lg-12 inside of it.
This snippet should work for you
<div class="col-sm-6">
<div class="people">
<div class="row">
<div class="col-sm-12">
<label>People: </label>
</div>
<div class="col-sm-12">
Dr. Rama R. Rao<br/>
Monte Hackney
</div>
</div>
</div>
<div class="partners">
<div class="row">
<div class="col-sm-12">
<label>Partners: </label>
</div>
<div class="col-sm-12">
None Available
</div>
</div>
</div>
</div>
I have some problem in bootstrap, I develope website but after completation of website client say they dont want to responsive website.
So, I first fix the .container width to 960px !important;
It will works..!! But Problem is I am also using .row class every where row class is making responsiveness which its contains..
I want 100% width background at footer but when I resize browser & scroll horizontally it will removes the background color.
What can I do...
See Website : Snapshot 1
When browser resize then see Whats the problem occure : Snapshot 2
my html code is written in bootstrap 3 :
<footer>
<div class="row footercolor">
<div class="container">
<div class="row">
<div class="col-xs-2 ">
<div class="row">
<h5 class="undr footertitle">Lorem Ipsum</h5>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">QUICK LINKS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<h5 class="undr footertitle">OUR NEIGHBORHOODS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group ">
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">GET WEEKLY LISTING UPDATES</h5>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon btn-ftrbtn">Add Me</span>
</div>
</div>
<div class="row"><br/></div>
<div class="row">
<ul class="list-unstyled list-inline pull-right">
<li><img src="img/fb.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/pintrest.png"></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</footer>
& My CSS Code is :
.footercolor {
background-color: #5e6872;
}
.footer{color:#c6c6c9}
.footertitle {
font-family: 'myriad_prosemibold_condensed' !important;
font-size: 13px!important;
color: #fff !important;
letter-spacing: 0.5px;
}
.footerlist li a {
font-family: 'myriad_prolight_semicondensed' !important;
font-size: 12px!important;
color: #c6c6c9 !important;
text-decoration: none
}
.footerlist li a:hover {
color: #fff !important;
cursor: pointer
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.container{min-width:960px !important;}
At the last Please Give me solution for that...
Any Help will be appreciated...
Add the below code to your CSS file will fix the issue.
html, body {
min-width:960px;
}
You have incorrect markup for bootstrap mate....
Use container > row > span
Instead of :
<div class="row footercolor">
<div class="container">
Order should be :
<div class="container footercolor"> <!-- notice the reverse order now -->
<div class="row ">