I have the following structure:
<div class="footer col-md-12">
<div class="social col-md-3 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-4">
<div id="fb"></div>
<div id="linkedin"></div>
<div id="gplus"></div>
</div>
</div>
There is also a div with copyright text, that I can't post. it is before the "social" div. On mobile devices, I am removing the copyright text(via display: none;), and I want to center the social icons, but I am unable to do so. I manage to do it, with margins and percentages, but on a specific resolution only, all other mobile resolutions are broken. Can someone assist me?
Note: I tried changing the xs column width and offset, but no combination managed to center the icons. I am posting the one, that was closest, that I centered with adding some margins.
i think that you just need to use class names in html and css as below
HTML
<div class="footer col-md-12">
<div class="copyright col-md-9 col-sm-8">
copyright information
</div>
<div class="social col-md-3 col-sm-4 col-xs-12">
Facebook -
Twitter -
Linkedin
</div>
</div>
CSS
.social{
background:aqua;
text-align: center;
}
.copyright{
background:silver;
}
#media screen and (max-width: 767px) {
.copyright {
display: none !important;
}
}
and this is the sample : https://jsfiddle.net/Tanbi/asohog47/1/
PS: For understanding clearly i used css background colors.
Have you tried:
.social {
display: block;
margin: 0 auto;
}
I find this works for me in most responsive centering dilemmas (with bootstrap in past times too I believe).
Let us know if this helps?
Related
I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
IN Bootstrap,
Col-lg is large screen,
Col-sm is small screen,
Col-md is medium devices,
Col-xs is Small screen.
According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,
UL list format:
<style>
ul{
margin:0;padding:0;
text-align:center;
}
ul li
{
display:inline-block;
text-align:center;
width:300px;
}
</style>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
whatever screen all list will come in center position of screen.
other format:
<div class="container">
<div class="row text-center">
<div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
</div>
</div>
we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,
<div class="col-sm-4 col-xs-12">
Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:
<div class="col-sm-3 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer plan">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
I am having problem making footer with pull-left and pull-right then center on mobile devices. Currently on desktop it is displaying properly.
Code(fiddle):
<footer >
<div class="container">
<p>
<div class="col-sm-4 pull-left">
<strong>Powered by Google</strong>.
</div>
<div class="col-sm-4 pull-right">
Terms
<span class="">|</span>
Policy
</div>
</p>
<BR>
<p>
<div class="col-sm-4 pull-left">
Please direct all queries to admin#gmail.com
</div>
<div class="col-sm-4 pull-right">
2.1
</div>
</p>
</div>
As you can see when it is on mobile devices it is displayed as this:
I want to be able to display it similar to this on mobile device where it is centered:
Wrap your col-*** divs in the .row div.
I think you don't need pull-left and pull-right classes. Add col-sm-push-4 class to make right div move to the page's right border
Add custom css to center content on mobile devices, like this:
#media (max-width: 767px) {
.col-sm-4 {
text-align: center;
}
}
Or add custom class to these divs, if you don't want other .col-sm-4 divs to have centered content.
https://jsfiddle.net/1gLmb0yy/6/
You need to use query media to do that, because when the result is pull to right in a small resolution. it will responsive and go to bottom. You can use F12 developer tool to see that.
<footer >
<div class="container">
<div class="col-sm-4 row">
<strong>Powered by Google</strong>.
Please direct all queries to admin#gmail.com
</div>
<div class="col-sm-4 row pull-right">
Terms
<span class="">|</span>
Policy
2.1
<div/>
</div>
</div>
<footer>
Developer tool result.
Example Media Query
#media (max-width: 767px) {
.col-sm-6.row.pull-right {
position: relative;
top: -15px;
}
}
I think I know why as soon as I release the screen from full-screen mode my right column goes to the bottom. I'm using Bootstrap and played around with the width as well. currently I have
<div class="col-sm-2">
<div class="col-sm-7">
<div class="col-sm-3">
and in css:
.col-sm-2 {
width:180px;
padding:13px 22px;
}
.col-sm-7 {
background-color: #FFFFFF;
width:970px;
padding:13px 22px;
}
I want my col-sm-3 to stay still even if I'm not in full screen in my desktop. Also in mobile version, if it's possible I want only col-sm-7 to be shown in the middle. And rest of them to be way at the bottom or at the dropbox. Can someone please help me?
I think you should define (or redefine) the width for extra small device too..
<div class="col-sm-2 col-xs-2">
<div class="col-sm-7 col-xs-7">
<div class="col-sm-3 col-xs-3">
and for col-xs-? provide the related width ..
I am new for web design. I am trying to making a box including an icon and a link. When the screen is laptop, the link should be in the left of the icon and align with its center vertically; when screen is tablet and mobile phone, the icon should be under the bottom of the icon and align with its center horizontally. And the icon is much bigger than the link. Here are the code and images links:
<div class="box">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
</div>
</div>
</div>
image links:
bg and md:
http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9c8z5tj206703amx6.jpg
sm and xs:
http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9cxdttj2045041gll.jpg
I've tried many method but still cannot make the link align with the icon's center vertically, and the link is always align in top of the box. The methods I've tried:
Use table, and set the icon and link as two table data: they can align as
what I want, but since they are two column, the link cannot move
down when the screen size change.
Use table, put them in same line: align in the box top.
Use list: align in the box top.
Use margin in CSS: align well in md and bg screen but the icon and
link will have gap in sm and xs as well.
Use "vertical-align:middle" in CSS: just not working
What should I do? Any advice will be appreciate, thank you!
You can use Flexbox, there is a nice guide here A Complete Guide to Flexbox
Also take a look at this this example I made for you, hope it can help you out.
Html code:
<div class="box">
<div class="row">
<div class="icon">
<span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
</div>
<div class="link">
<a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
</div>
</div>
And this is the CSS:
.row {
display: flex;
align-items: center;
}
.icon {
width: 200px;
height: 200px;
background-color: salmon ;
}
.link{
padding: 10px;
}
a {
text-decoration: none;
}
#media (max-width: 450px) {
.row {
flex-direction: column;
}
}
I did use fixed sizes with the icon to illustrate, but it'll work with any size.
Take a look at this live example JSFiddle Flex Example
so confused at the moment I am trying to place a social icon below a h3 tag that is in the same bootstrap row however having a nightmare doing it.
I am trying to create this effect:
However I cant seem to get those icons below the phone number element when they are in the same row, they just sit on the same line.
The logo is also in the same row as the phone number element so if I created another row and placed the icons in that row they appear to far down the page.
Here is an example of my code:
HTML
<div class="container hidden-sm hidden-xs">
<div class="row">
<div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<div class="phone-div col-md-6 col-sm-6">
<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i> 01429 7654287</h3>
<img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
</div>
</div>
</div>
CSS
.phone-number {
color: #fff;
margin-top: 20px;
display: inline-block;
font: 600 2em 'Open Sans', sans-serif;
float: right;
}
.facebook-icon {
display: block;
height: 30px;
float: right;
}
/* main logo */
.logo-custom {
height: 75px;
}
#media only screen and (max-width : 1199px) {
.logo-custom {
height: 61px;
}
}
Any tips on what I might be able to do to create this effect?
Thanks, Nick :)
Try this Code:
<div class="container hidden-sm hidden-xs">
<div class="row">
<div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<div class="phone-div col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12">
<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i>01429 7654287</h3>
</div>
<div class="col-md-12 col-sm-12">
<img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
</div>
</div>
</div>
</div>
Hope this may useful
I think you might be just over-complicating things in your own mind. Forget about Bootstrap for a minute, if you wanted to just make a page that has two elements stacked one on top of the other, then you'd make sure to use block elements (which means that they will take up 100% the width of the container they are in by default).
The thing is that your custom css is actually overriding this normal behavior because you are expressly setting the phone number to be display: inline-block; and making both elements use float:right. Just remove those from your css rules and you'll get your desired effect:
.phone-number {
color: #fff;
margin-top: 20px;
font: 600 2em sans-serif;
}
.facebook-icon {
display: block;
height: 30px;
}
If you want the items to align to the right, just add the Bootstrap helper class: text-right to the column div or add text-align: right to your css rules.
EDIT: Just a suggestion
Also, you can streamline your markup. If you want the entire container to be hidden on sm and xs devices, then all you have to have in your col classes is col-md-6. And, if you didn't want your container to be hidden at the xs and sm breakpoints, then all you would need is col-sm-6, because that alone would set the columns to be 50% for ALL viewports that are larger than 767px. Remember, col classes are additive. When you add a col class, it's like saying: "make this column this width from this viewport size and up until I tell you otherwise".