I would like to create a form using BootStrap 4 that looks like the forms that BootStrap 3 allowed one to create easily. i.e. I would like a bold label right-aligned within a specific size (e.g. col-sm-4), and next to it I would like an input field whose width is controlled by an enclosing div tag with a class like col-sm-4 (as an example). How can I do this? I have spent an hour or so now battling with .css and BS4 to create this, but have been unable to achieve the effect I desire. Any hints would be great.
The code below will produce the effect I wish for but will not allow me to have different sized inputs (they all default to the same size)
css:
div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}
html:
<div class="form-inline">
<label for="INcity" class="col-form-label col-12 col-sm-3">City</label>
<div class="col-sm-4"><input type="text" name="INcity" class="required form-control" id="INcity"></div>
</div>
If I instead use form-group, then I can alter the size of the input fields using the enclosing tags, but then the css (even when I change it to be .form-group instead of .form-inline) fails to align the label correctly and set it to bold. So I guess I'm looking for either the correct .css or an example of how to achieve the whole effect simply (as it was with BS3). I must be missing something obvious because I can not believe that the BS4 developers would make it so difficult to achieve the same look as BS3 allowed without any of the .css hacks etc that I am having to do. Though I do notice that every one of the examples given in the BS4 documentation has the label left-aligned, so perhaps they have decided to make that formatting decision for every BS4 user, but that seems a bit unlikely (and unfriendly).
In order for col-* to work they MUST be inside a .row or .form-row.
There's no need for any extra CSS:
https://codeply.com/go/0Vkxbmgb4c
<div class="form-row">
<label for="INcity" class="col-form-label col-12 col-sm-3 font-weight-bold text-right">City</label>
<div class="col-sm-4">
<input type="text" name="INcity" class="required form-control" id="INcity">
</div>
</div>
https://getbootstrap.com/docs/4.0/components/forms/#form-grid
If you have several of these that you are converting from BS3 to BS 4, then the way that ZimSystem has suggested as an answer will be extremely tiresome to implement - being as you will have to change every single instance of this. Just create some css (as it seemed you were actually asking for) with the following .css and use find and replace to replace every instance of control-label with col-form-label. This approach is much easier than the approach suggested above, and uses a more modular approach (in that you only have to write the css markup once - modularity should be every programmer's approach in my opinion). Ensure this css is loaded AFTER BS4 css has loaded.
.col-form-label
{
font-weight:600;
text-align:right;
}
I'm using the Bulma CSS framework with a Rails app. I have a long list of items and would like to display them in tiles. However, the tiles run off the screen instead of wrapping to the next line.
The Bulma Documentation doesn't address this issue. Since I am creating the tiles dynamically from a variable-length list, explicit nesting as described in their docs isn't so easy and I'd rather have it cleanly wrap to the next line.
Here's what my code basically looks like:
<div class="tile is-ancestor">
<div class="tile is-parent">
<% #my_list.each do |item| %>
<div class="tile is-child box">
<p><%= item %></p>
</div>
<% end %>
</div>
</div>
Since Bulma is based on flexbox, I would think there is some equivalent to flex-wrap: wrap;, but I couldn't find this option yet.
Update: It's possible to add the style flex-wrap: wrap;to the parent-container, but is there a Bulma-integrated class flag?
It seems that there is currently no class-flag in Bulma addressing this directly.
However, since Bulma is based on flexbox, it is possible to add the style flex-wrap: wrap; to the parent container to achieve the desired outcome.
For the gridsystem Bulma does have a class for this.
If you add is-multiline to your .columns element it should wrap automatically. (adds flex-wrap: wrap; under the hood)
Source: Bulma column docs
(Not sure how this applies to tiles, but you could always wrap them into columns)
The DevTools inspector shows that Bulma's box p has a default style of white-space: nowrap.
Applying style="white-space: normal!important;" directly onto the <p> tag forced it to wrap as normal and fixed the problem for me.
I would like to re-order some div using only CSS if possible.
Here is the HTML sample I want to re-order:
<div class="block1">
Block1
</div>
<div class="block2">
<div class="subblock1">S-Block1</div>
<div class="subblock2">S-Block2</div>
<div class="subblock3">S-Block3</div>
</div>
And this is the graphical result I want:
S-Block1
S-Block2
Block1
S-Block3
I already tried playing with display: flex; and order: X but with no success. The main problem lays in the fact that I want to split the block2 before and after the block1. The flex display only allow me to change order of block of the same "level".
I would really like to have a solution that doesn't not use JavaScript to re-write the DOM (by taking subblock3 and putting it elsewhere to please my CSS) if possible.
It appears this is not possible and javascript is not an option for my problem.
Here is the sample code I used (jQuery needed).
$(".subblock2").prependTo(".form-wrapper");
$(".subblock1").prependTo(".form-wrapper");
This is a question regarding Angular 2 selectors, Custom tags vs. Custom attributes, SEO and browser rendering.
When I first started to look over Angular 2, the very first thing I did when following their quickstart, right of the bat, was to change my selector to '[my-component]' (attribute selector) instead of 'my-component' (tag selector), so I could have <div my-component></div> in my html instead of <my-component></my-component>, which isn't valid html. So I would write html according to standards. Well, at least pretty close to standards (because my-component isn't a valid html attribute, but I could live with only that html validation error)
Then, at some point in a video on youtube, someone from the angular team mentioned that we should use the tag selector, performance wise at least.
Alright I said, screw html validation... or shouldn't I?
So:
Say I ignore the W3C screaming about my html being completely invalid because of the <custom-tags>. I actually have another bigger and more real concern: how does this impact SEO?
I mean don't just think client-side app, because in the real world (and for my angular 2 project as well) I also have server-side rendering, for 2 very important reasons: SEO and Fast initial rendering of the site to the user for that initial view, before the app bootstraps. You can not have a very high traffic SPA otherwise.
Sure, google will crawl my site, regardless of the tags I use, but will it rank it the same in both scenarios: one with <custom-make-believe-tags> and the other with only standard html tags?
Let's talk browsers and css:
As I started to build my first SPA site in Angular 2, I was immediately faced with another concern:
Say (in a non SPA site) I have the following html markup:
<header>
<a class="logo">
...
</a>
<div class="widgets">
<form class="frm-quicksearch"> ... </form>
<div class="dropdown">
<!-- a user dropdown menu here -->
</div>
</div>
</header>
<div class="video-listing">
<div class="video-item"> ... </div>
<div class="video-item"> ... </div>
...
</div>
Angular 2 wise I would have the following component tree:
<header-component>
<logo-component></logo-component>
<widgets-component>
<quicksearch-component></quicksearch-component>
<dropdown-component></dropdown-component>
</widgets-component>
</header-component>
<video-listing-component>
<video-item-component></video-item-component>
...
</video-listing-component>
Now, I have 2 options. Let's just take the <video-listing-component> for example, to keep this simple... I either
A) place the entire standard html tags which I already have (<div class="video-item"></div>) within the <video-item-component> tag, and once rendered will result in this:
<video-listing-component>
<div class="video-listing>
<video-item-component>
<div class="video-item>...</div>
</video-item-component>
...
...
</div>
</video-listing-component>
OR:
B) Only put the content of <div class="video-item"> directly into my <video-item-component> component and adding the required class (class="video-item") for styling on the component tag, resulting in something like this:
<video-listing-component class="video-listing">
<video-item-component class="video-item"></video-item-component>
<video-item-component class="video-item"></video-item-component>
...
</video-listing-component>
Either way (A or B), the browser renders everything just fine.
BUT if you take a closer look (after everything is rendered in the dom, of course), by default the custom tags don't occupy any space in the dom. They're 0px by 0px. Only their content occupies space. I don't get it how come the browser still renders everything as you would want to see it, I mean in the first case (A):
While having float: left; width: 25%; on the div class="video-item", but each of these divs being within a <video-item-component> tag, which doesn't have any styling... Isn't it just a fortunate side-effect that the browser renders everything as you'd expect? With all the <div class="video-item"> floating next to eachother, even though each of them are within another tag, the <video-item-component> which does NOT have float: left? I've tested on IE10+, Firefox, Chrome, all fine. Is it just fortunate or is there a solid explanation for this and we can safely rely for this kind of markup to be rendered as we'd expect by all (or at least most) browsers?
Second case (B):
If we use classes and styling directly on the custom tags (<video-item-component>)... again, everything shows up fine. But as far as I know, we shouldn't style custom components, right? Isn't this also just a fortunate expected outcome? Or is this fine also? I don't know, maybe I'm still living in 2009... am I?
Which of these 2 approaches (A or B) would be the recommended one? Or are both just fine?
I have no ideea!!
EDIT:
D'oh, thanks Günter Zöchbauer. Yeah, since my divs have float: left, that's why the (custom or not) tag they're wrapped in doesn't expand it's height. Seems I've forgotten how css works since I started to look over Angular 2:)
But one thing still remains:
If I set a percentage width on a block element (call it E), I would assume it takes x% of it's immediate parent. If I set float: left, I would expect floating within the immediate parent. In my A case, since the immediate parent is a custom tag with no display type and no width, I would expect for things to break somehow, but still... my E elements behave like their parent isn't the custom tag they're each wrapped in, but the next one in the dom (which is <div class="video-listing> in my case). And they occupy x% of that and they float within that. I don't expect this to be normal, I would think this is just a fortunate effect, and I'm afraid that one day, after some browser update... I'll wake up to find all my Angular 2 sites looking completely broken.
So... are both A and B an equally proper approach? Or am I doing it wrong in case A?
EDIT2:
Let's simplify things a bit. As I got part of my question answered, let's take another example of generated html (simplified a bit, with inlined css):
<footer>
<angular-component-left>
<div style="float: left; width: 50%;">
DIV CONTENT
</div>
</angular-component-left>
<angular-component-right>
<div style="float: left; width: 50%;">
DIV CONTENT
</div>
</angular-component-right>
</footer>
In the original, not yet implemented html (whithout <angular-component-...>, those divs should float left and each occupy 50% of the <footer>. Surprisingly, once they're wrapped in the <angular-component-...> custom tags, they do the same: occupy 50% of the footer. But this just seems like good fortune to me, dumb luck... Unintended effect.
So, is it or isn't it "dumb luck"?
Should I leave it like that, or rewrite so instead of the above code, I would have something like this:
<footer>
<angular-component-left style="display: block; float: left; width: 50%;">
DIV CONTENT
</angular-component-left>
<angular-component-right style="display: block; float: left; width: 50%;">
DIV CONTENT
</angular-component-right>
</footer>
Note that the inline styling is introduced here for simplicity, I would actually have a class instead which would be in an external css file included in the <head> of my document, not through style or styleUrls from my angular components.
The issue is your HTML validator. The - in the element name is required for elements to be treated as custom elements and it is valid HTML5. Angular doesn't require - in element names but it's good practice.
Check for example https://www.w3.org/TR/custom-elements/#registering-custom-elements (search for x-foo) or https://w3c.github.io/webcomponents/spec/custom/#custom-elements-custom-tag-example. I'm sure this dash rule is specified somewhere but wasn't able to find the spec. It is for example required in Polymer that depends on elements being proper custom elements while this doesn't matter much in Angular. The only difference as far as I know is that when you query the element, you get a HTMLUnknownElement when the - is missing in the name and a HTMLElement when it contains a -.
See also this question I asked a few years ago Why does Angular not need a dash in component name
BUT if you take a closer look, by default the custom tags don't occupy any space in the dom. They're 0px by 0px. Only their content occupies space. I just don't get it how come the browser still renders everything as you would want to see it
I'm not sure I understand this question. When Angular processes the template it adds the content dynamically. When you see the content in the browser than it's also available in the DOM and has actual dimensions.
Search engine crawlers are able to process pages that are generated by JavaScript. If this isn't enough, server-side rendered pages can provide static HTML to crawlers that contain the whole view.
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.