So i have read this topic: Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
But i still have some problems:
My code ( i have shortened it a bit, but i think nothing important is missing):
<div class="row justify-content-center">
<div class="col-lg-8 col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="col-lg-4 col-md-10 justify-content-center" >
/*My login div*/
</div>
So, what i want to happen: on small screens i want my Login div be almost as wide as a screen (10/12 and centered), PLUS i want it float on the top of the screen, before the text. I assume i have to add something like pull-sm-12 to my Login div and something like push-sm-10 to my Text div, but it doesn't work, my div just float beyond screen borders.
Bootstrap 4 has moved to a full flexbox model, so the push/pull utilities are no more. They are replaced by the "order" utilities. (Hint: The documentation seems to be out of date. Even though the class names start with order in the documentation, they actually start with flex, i.e. flex-first, not order-first.) Anyways, based on what you described, I think the following code will get you mostly there.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-sm-wrap flex-md-nowrap justify-content-sm-center justify-content-md-start">
<div class="flex-sm-last flex-md-unordered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="flex-sm-first flex-md-unordered" >
Login box
</div>
</div>
Unfortunately, the Stack Overflow snippet functionality doesn't really let you play with responsiveness. It's all defined widths, apparently. You should copy the code somewhere else to play around with it.
Related
Long(ish) time lurker, first time poster! Apologies if this has been asked a 1000 times I am new to coding and I am currently working on a project with Codecademy and I was hoping someone would be able to provide some help...
I am tasked with replicating the layout you can see in the screenshot below. However I am unable to get any further as I cannot for the life of me get text to appear centered and to the right of the image. The closest I have gotten previously is the text will appear to the top right of the image. I am using a file for html and a seperate style sheet if that helps.
how it should look
how mine looks
This is my HTML code so far
<div class="flex-content" id="banner">
<img class="img2"><img src="images/banner.jpg"></div>
<div class="supporting-content">
<h3>Learn something new every day</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="button" href="#">Start here</a>
</div>
</div>
Any guidance would be hugely appreciated!
Alikin
use flexbox and "flex-direction: row;"
I was wondering if anyone could suggest a shorthand for html coding specifically in naming classes and ids or just designating html elements. Currently with regular html i am forced to write:
<div class='class1'> <div id='id1'> </div> </div>
It seems kind of heavyhanded to me having to write div class='' or div id='' , each time. I keep writing the same type of thing over and over again. I know its normal but it doesnt seem optimal at all. Is there another way this can be written either in standard html, html5 or using a other markup language or preprocessor that still maintains the <> symbols but replaces div class= or div id = with something allittle less verbose? but equally expressive? Thank you.
You could try an HTML pre-processor such as HAML (http://www.haml.info).
With HAML, your code would go from this:
<div class='class1'> <div id='id1'> </div> </div>
to this:
.class1
#id1
And something a little more complicated like this:
<html>
<body>
<h1 class="heading title">Heading</h1>
<p class="paragraph description">Lorem ipsum dolor sit amet...</p>
</body>
</html>
could be written in HAML like this:
%html
%body
%h1.heading.title Heading
%p.paragraph.description Lorem ipsum dolor sit amet...
I'd recommend you to take a look at pug https://pugjs.org/api/getting-started.html
I am learning polymer and web components with it and hit a point where I would like to make a custom element that can fetch all tags instead of a specific one. I was thinking if I could use a wildcard character it would work but turns out it doesn't. Is this possible?
<div class="card-header" horizontal layout>
<div id="image_section" flex two>
<content select="img"></content>
</div>
<div id="text_section" flex>
<content select="*"></content>
</div>
</div>
So then I would be able to use something like below instead of having to predict all possible tags a user could potentially use with my element.
<project-preview force_full_size>
<img width="900" height="350">
<h2> Lorem ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<some-other-custom-element>
<h2>Lorem ipsum</h2>
</some-other-custom-element>
</project-preview>
You can juste use :
<content></content>
It will insert the whole content of your element inside it (if you don't use the select attribute it will inject all children nodes that have not been already inserted in a content with select)
so, for aside, please see here what I mean: http://ejfox.github.io/sStory/
One article, 2 css columns, in the first column I have the article with text and pictures, in the second column I put aside elements. Those aside elements are either text or images and they resemble the asides of the newspapers.
I am using zurb foundation, so I created a row with two columns. I have the article in the first column. I would like to put asides in the second column, but only after a specified point.
For instance:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
tincidunt ut laoreet dolore [here]
magna aliquam erat volutpat.
I want the aside to go after the [here] position.
So, the question is, is it possible, using a 2 columns layout with zurb foundation, to put elements in the second column at points specified in the first column?
The most straight-forward way of doing this in a way that will also give you predictable responsive behavior is to make a separate row for each paragraph you want the aside to relate to.
See jsFiddle: http://jsfiddle.net/vr4C2/1/
<div class="row">
<div class="large-6 columns">
<p>Story info relating to the aside</p>
</div>
<div class="large-6 columns">
<h5>Aside</h5>
<p>Your aside info</p>
</div>
</div>
so im learning HTML and CSS and i have a question
im trying to put an image in an article and make it so the text that is also in the article will not write overtop of or get in the way of the image, but everything ive tried so far isnt working properly.
i was using W3Schools.com to learn how to do it.
here is they're isntructions on doing it
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position
and here is an example of what im trying to do http://www.spacenews.com/article/launch-report/37302australian-led-scramjet-test-ends-in-failure
even with the instruction on the website i cant get it to work properly, could they possibly be the wrong instructions?
im using coffeecupfree HTML editor and loading the site up on chrome.
You can do this with simple HTML:
<img align="right" src="http://www.spacenews.com/sites/spacenews.com/files/styles/large/public/images/articles/Scramspace_4x3.jpg?itok=7JbqmW0r">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet </p>
When you see something on a site and you'd like to learn how they did it, I'd suggest viewing the source or right-clicking the element you're interested in in Chrome and selecting "Inspect Element".
JSFiddle example
To achieve what you're trying to do, you can also use float: right in your image. It will make the text surround your image.