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?
Related
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.
I love bootstrap, but i'm trying to achieve something totally outsides its expected grid, which is to have cells stack under each other without grouped lines. Something like Pinterest, if you will.
Bootstrap normal grid:
Bootstrap no rows concept:
Perhaps the correct answer is "don't use bootstrap" but having built many sites with it, I would love to continue using it and find a way around this.
If indeed i should use another responsive framework with a grid system more like what I need, what would you recommend?
tia
I've worked on a similar problem for a nested drag'n-drop box api with goal to be compliant with bootstrap grid on final render, the builder wasn't a bootstrap grid but a home made similar paradigm of bootstrap grid and I've fixed it with the CSS3 marvelous flexbox
take a look at Solved by flexbox
I have putted a root row (only one for multiline) and added a class to it which implement
display: flex;
flex-wrap: wrap;
eg:
<div class="row flex-row">
<div class="col-6">Variable height content</div>
<div class="col-3">...</div>
<div class="col-12">...</div>
<div class="col-3">...</div>
...
</div>
and the css
.flex-row{
display: flex;
flex-wrap: wrap;
}
this will have the effect to adjust automatically the height of all the box that is on same line to the bigger one
Looks like you have to use JS to reach goal.
You can use following libs:
Jquery Wookmark - Light weight and fast. Used in myself resolving similar issue
Isotope - Flexible and reach functions one
Mansonry - Popular lib, similar to Isotope
You could try inverting columns and rows in bootstrap.
<div class="row">
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here with more text than the first content but it still needs some more</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
</div>
Here is a jsfiddle of this.
The key thing to realize about the col-(size)-(gridsize) is that they will wrap left to right then top to bottom. So, if you make a col with a grid size less than 12, other col will begin to wrap around. You can also nest them as needed to split up the page. So, it's possible to create a 'rowless' layout like so:
(this isn't an amazing demo but it illustrates that what you want is possible)
http://jsfiddle.net/7575A/1/
you can use row in col and then but new cols in these rows
if you have problem in padding make your
classes no-padding / no-left-padding / no-right-padding
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.
The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.
Here's the current structure of the html:
<div class="row r4">
<div class="col-md-2">
<div class="bottom">
<div data-bind="text: description()"></div>
<span data-bind="text: metric()"></span>
</div>
</div>
<div class="col-md-8">
<div class="bottom">
<div data-bind="foreach: keyLabels()">
<div class="key-color">
<div data-bind="attr: {class: color + ' color-value'}"></div>
<div data-bind="text: label"></div>
</div>
</div>
</div>
</div>
</div>
I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.
I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.
Any ideas?
Here's a simplified version of your markup that helps more easily reproduce the issue:
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Working Demo in jsFiddle
I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV.
You can see my problem in jsfiddle.
Can you please help me solve this?
I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it.
Basically I want to text to look normal inside the DIV.
<div class="container-right">
<div class="topul" style="background-color:#2ecc71; width:352px;"></div>
<div class="parent" style="min-width:350px; width:350px; height:445px;">
<p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>
</p>
<div class="topul2" style="float:left; background-color:#2ecc71;"></div>
<div class="d-table">
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Name:
<p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71"><b>Some name</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71;">Address:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Other info:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
</p>
</div>
</div>
</div>
</div>
</div>
You can see the CSS in the jsfiddle link above.
I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this.
Please help.
Thanks
The problem is with your .myp4 styles
To avoid the overlap remove height: 2px;
To avoid bleeding from the div set max-width: 200px;
As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height
NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements
Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.
Try setting min-height instead of height on the rows and/or cells.
The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table {
width: 350px;
}
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.