I must code an html viewer which take some objects as input and provides a nice html layout. For the layout part I decided to use twitter bootstrap 2.3
prerequisites
The objects are represented as divs of different size
I don't know the number of divs to display in advance
Now, what I want is an "auto-adjusting" layout able to displace in the most convenient way the object in the screen. The concept is sketched in the following image:
on the left you can see the objects, on the right the desired final diplacement.
I nearly get it work in this way:
<div class="row-fluid">
<div class="node span6">a box</div>
<div class="node span6">a second box</div>
<div class="node span6">a third box</div>
<!--as much divs as you want-->
</div>
but in the second line I get a bad "tilted-right" effect due to the margin-left settings of the bootstrap css.
I also tried to override the css specification of the span to adopt a margin-right driven approach but with no luck (if it is interesting I can provide info about this approach).
Any suggestions?
You can do this by using bootstrap and the :nth-child pseudo selector. However, this that you are trying to accomplish will also require that you make CSS changes beyond the simply .span's left margin... You will probably need to re adjust this with smaller #media queries and it's probably outside the scope of this question to show you how to do all that, however... this should get you going:
Here is a jsFiddle
The fiddle above has bootstrap loaded... I'm making a container with the class .row-fluid in which I'm adding many .span6's, but I am also making sure that on the third and then every two more .span6 it's removing the left margin so it stacks two and two .span6 per row.
You can read more about the :nth-child pseudo selector here
Related
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
Does Twitter Bootstrap 3 provide a built-in way to "simulate" a smaller screen by adding a css class to grid container?
My use case is that I want to display an section of html using bootstrap's grid normally on a large screen, but I want to reuse the same snippet for displaying in a modal (which is much narrower). For example, say I have this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">One</div>
<div class="col-md-6 col-sm-12">Two</div>
</div>
</div>
Is there a built-in class I can add to the .container element (like .simulate-sm) to force the columns to display using the sm grid definition, even if it's on md screen? The html above is just an example: my real-world html has a large number of rows and more varied column combinations, which makes me hesitant to try to massage the column classes individually.
Thanks for your help!
There is nothing built in, but with the right CSS (including descendant classes), you can make a single added custom class do all the work for you. In your specific example, you would add .simulate-sm to the .modal-body div like so:
<div class="modal-body simulate-sm">
<div class="col-md-6 col-sm-12">One</div>
....
and some custom CSS:
.simulate-sm .col-sm-12{width:100%}
.simulate-sm .col-sm-8{width:75%}
.simulate-sm .col-sm-6{width:50%}
.simulate-sm .col-sm-4{width:25%} /* extrapolate as needed */
Do this for whatever column classes you've used in your original code, doing the basic math to figure out % width. (i.e. the same as Bootstrap's).
The combination of descendant specificity and using this on the modal-body means it ONLY overrides Bootstrap's styling when within a modal (to which you've added the .simulate-* class).
Here is an example: http://www.bootply.com/KhNbrdUzoE
I can't quite visualize your problem, and I've never had to do this myself, but I feel like this snippet from the documentation is relevant to your need:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
If you remove the col-md-6 class definition it sounds like the col-sm-12 definition will take effect for all form factors equal to or larger than the small screen.
Apologies if the answer is irrelevant. Was a complete shot in the dark.
If you are looking to emulate what it would look like on a mobile device, most browsers have emulators. For example in chrome, you would inspect an element and there is an emulator option on the bottom near the console. In terms of emulating a screen "bigger" than yours, there are websites that allow you to view your webpage from a different resolution. With a quick google search here is an emulator: http://quirktools.com/screenfly/
I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.
I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:
.container
+container
+margin-leader
+margin-trailer
+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.
I now want to add a border radius and box shadow to this element.
Where do I place these styles as they don't fit within the layout stylesheet?
2nd issue is:
I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.
I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.
3rd issue:
I have created a title-box module that is marked up as follows:
<div class="title-box">
<h3 class="title-box__header">Upcoming Events</h3>
<div class="title-box__content">
</div>
</div>
I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?
1) According to BEM methodology you can use mixes to solve your first issue:
<div class="container widget"></div>
This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).
2) You can add class to these images making them elements of media block and then specify types of images with modifiers:
<div class="media-block">
<img class="media-block__image"/>
<div class="media-block__description">Some text</div>
</div>
<div class="media-block media-block_float_left">
<img class="media-block__image media-block__image_type_important"/>
<div class="media-block__description">Some text</div>
</div>
So image elements of media block which are important can be styled with bigger size.
Also you can use modifiers to set float direction.
3) I'm not sure if I got your question right but I think you have two options:
Style title-box itself (e.g. as float with some margins).
Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.
But I am not really sure whether the idea is that I put one <div class="container"> around my whole page, or whether I should nest them. I think I see both in various examples.
Anywhere you want a div that is centered with a width of 940px. It is also used in the navbar to position elements. There are no hard and fast rules.
If it was only meant to be used once they would have given it an id instead of a class
I've been trying to figure out the same thing -- I think the idea is that .container is intended to be a fixed width div -- 940px in the default css -- whereas .container-fluid is, well, fluid. At least that's what I've sussed from looking at the css and the (sparse) documentation.
I'm trying to centre multiple div elements on a page. Some however need to not be centered so I've ruled out using the body element for this. I've figured there would be three ways to do this:
The first would be by using a container, however this adds an element for pure layout styling and isn't very semantic.
<div id="notcentred">
<div id="container">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
</div>
The second would be to create a centre class and simply adding it to each element that needs to be centered.
<div id="notcentred">
<div id="centrediv1" class="centre"></div>
<div id="centrediv2"class="centre"></div>
The third would be to add the centre CSS to each DIV's id.
<div id="notcentered">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
I would think number 2 would be best, as it would be the easiest to manage, and the most semantic, but if there is anything I'm unaware of, options would be welcome.
Thanks in advance.
This is the exact use classes were designed for. So, really, using idealistic CSS the third one is wrong. The first two are absolutely fine.
Although, if you want all the divs to be similar, putting some in a wrapper div may make it harder to style their other settings. The second also allows you to more easily have centered divs dispersed among non-centered divs. The second also has fewer elements, which will make your code a lot easier to read!
With this in mind, I would recommend the second.