Working on my first project with Bootstrap (and CSS in general).
In the following section, the columns look great on local for xs screen sizes, but on the server, the entire section is squashed over to the right. Can't seem to figure out what's wrong.
<div class="container testimonials">
<h2>What People Are Saying</h2>
<div class="row">
<div class="col-md-1 col-xs-0">
</div>
<div class="col-md-5 col-xs-6">
<div class="quotes">
<blockquote>Extremely helpful! How to Interview is an easy read that hits all the major concerns about interviewing - and how to handle them appropriately. I recommend it to anyone who is trying to land a job.</blockquote>
</div>
</div>
<div class="col-md-5 col-xs-6">
<div class="quotes">
<blockquote>I interviewed at Google twice and didn't made the cut. I interviewed a third time -- trying the techniques in How to Interview -- and got the job. It changed the way I communicate and helped me get the job I wanted.</blockquote>
</div>
</div>
<div class="col-md-1 col-xs-0">
</div>
</div> <!-- /row -->
</div> <!-- /testimonials -->
The problem is excessive padding on the testimonials class:
.testimonials {
/* ... */
padding-left: 190px;
padding-right: 190px;
}
It's not leaving enough room for the content.
Since those rules are coming from a separate CSS file main.css perhaps that file is different on your local server.
Related
I'm using Bulma. Consider the following HTML
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Now, the title is centered but the buttons aren't. Of course, if we set display: block; to the div which groups together the buttons, they get centered as well. But I couldn't find any example and I'm not sure if that's the way to go here.
Is there a more "Bulma-like" way of solving this problem?
I'm not sure about that.
I tried to reproduce the issue but it seems that the buttons are centered.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Maybe there are other rules that overrides this behavior?
EDIT:
It seems that in the same version between 0.4.0 and 0.8.0 they take advantage of the flex box layout.
In the example that you shared the buttons class has the display: flex-box but it miss the property justify-content: center; for centering the content of that div.
I don't know if it is the expected behavior or a bug.
Here a working example: https://jsfiddle.net/gix_lg/73vmofqa/1/
Have you tried " is-vcentered" instead of "has-text-centered" ?
Also, you can use empty columns by using a div with a class="column" to create horizontal space around .column elements, or use .is-centered on the parent .columns element
Have you tried to inspect your page to see the css?
I am new to bootstrap and I very much confused with this basic situation and I feel like I couldn't move forward without understanding the grid system.
Question 1: How would I know the equivalent class prefix of a certain device to another device.Example: col-md-6 what is its equivalent if i wanna show it to smaller devices, what will be the col-sm-X or col-xs-X? I am really confused with griding system.
Question 2: I came across with a bootstrap tutorials. And I am confuse why did he place col-sm-10 in the stores-banners in which it only takes 6 colums in 960 grid, why isn't it col-sm-6 instead? please see image attached.
In following image I'm referring to the buttons area
<div class="container top-description-app">
<div class="row">
<div class="col-sm-6 top-description-text">
<h1>Hello</h1>
<h3>We take mobile photography to a brand new level.</h3>
<p>With our free app you can take amazing photos straigh your phone.</p>
<div class="col-sm-10 stores-banners">
Get the free app
</br>
<img src="img/apple-banner.png" alt="App Store">
<img src="img/google-banner.png" alt="Google Store">
</div>
</div>
<div class="col-sm-6 top-iphone-wrapper">
<img src="img/iphone-header.png" alt="iPhone app">
</div>
</div>
</div>
Hope you can help me guyx. Thanks in advance.
It depends on how you want your website to look like on different screen sizes.
Basically, xs - mobile, sm - tablets, md - desktops, lg - large desktops.
Example:
p {
height: 200px;
margin-bottom: 20px;
background: #ccc;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-12"><p></p></div>
<div class="col-sm-6 col-md-12"><p></p></div>
</div>
</div>
This code means you will have: 1 columns on mobiles (xs), 2 columns on tabletes (sm) and 1 column on desktops (md) and large desktops (lg).
This code you provided isn't really correct. If you nest col- classes inside another col- class you should create another row.
<div class="container top-description-app">
<div class="row">
<div class="col-sm-6 top-description-text">
<h1>Hello</h1>
<h3>We take mobile photography to a brand new level.</h3>
<p>With our free app you can take amazing photos straigh your phone.</p>
<div class="row">
<div class="col-sm-10 stores-banners">
Get the free app
</br>
<img src="img/apple-banner.png" alt="App Store">
<img src="img/google-banner.png" alt="Google Store">
</div>
</div>
</div>
<div class="col-sm-6 top-iphone-wrapper">
<img src="img/iphone-header.png" alt="iPhone app">
</div>
</div>
</div>
And this code means that you will have col-sm-10 inside this col-sm-6 class (so 10 of 12 columns occupies this col-sm-6 column).
Example:
p {
display: block;
margin-bottom: 20px;
background: #ccc;
height: 150px;
}
span {
background: #333;
color: #fff;
display: block;
height: 100px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Column</p>
<div class="row">
<div class="col-sm-6">
<span>Column in another column</span>
</div>
<div class="col-sm-6">
<span>Column in another column</span>
</div>
</div>
</div>
<div class="col-sm-6">
<p>Column</p>
</div>
</div>
</div>
col-md-6 what is its equivalent
there's no equivalent, I mean you shouldn't look at it like that, each bootstrap grid divides your screen into 12 equal columns. we have 4 screen sizes in bootstrap called lg or large, md or medium, sm or small and xs or extra-small. your column definition should be based on what you wanna show to the user at that screen size.
Take a look at this example to better understand the concept. try resizing the screen to see the columns in action.
And for your second question, let me explain it with an example:
Imagine you have a screen with the width 1200px and you wanna have a column with the width 500px how do you do that using the bootstrap grid system? you need to bring your box (screen) size to 1000px and divide it in two. how do you do that?
<div class="col-lg-10">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
it is that simple :)
Bootstrap uses a 12 by 12 grid system, and you have grids within grids.
In your example above, the screen is split with two col-sm-6, on all devices with a screen width larger than the sm breakpoint (which defaults to around 768px, but is customizable), and to stack on devices smaller than the sm breakpoint.
You also asked about the col-sm-10 element, which is INSIDE the col-sm-6 element, which makes a container that is 10/12th the width of half the screen (or half the col-sm-6 that is its parent).
I would have wrapped that col-sm-10 in a <div class="row">, and added an empty <div class="col-sm-2"></div> to finish out the row. That would say for screens smaller than sm, take up the whole space, and screens larger than sm, take up 10/12ths of the space available (which in this case is half the screen, because of the element it is nested in).
If you wanted to always make sure those buttons were never quite as wide as the text above: if you wanted the right edge of the buttons to be set in, you might make the col-sm-10 and col-sm-2 like col-xs-10, which says NEVER stack these divs, regardless of screen size.
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.