I recently switch to Sublime Text 3 from Dreamweaver. I use Ctrl+Shift+J for grouping HTML in there so I am looking for its alternative in Sublime Text 3. This feature is available in Sublime Text 3? because I could not find the the key or in menu.
<div>
<div>
<p>
<span></span>
</p>
</div>
</div>
into
Sublime Text can only indent via whitespace. So if you have this:
<div>
<div>
<p>
<span></span>
</p>
</div>
</div>
Then Sublime can't fold it. You need to indent like so:
<div>
<div>
<p>
<span></span>
</p>
</div>
</div>
And now, you'll see fold icons in the gutter - they may be a bit faint. To fold via the keyboard, you can do CTRL+K, CTRL+0-9, or CTRL+Alt+[ to fold and CTRL+Alt+] to unfold.
If it's tag attributes you want to fold, then you can do CTRL+Alt+T
If you're on OSX, then it's CMD instead of CTRL.
Related
I was reading bootstrap Collapse docs and decided to try horizontal collapse. Here is the code of a Vue component that used same code as bootstrap docs:
Vue component:
<template>
<section>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsId" aria-expanded="false" aria-controls="collapsId">
Toggle width collapse
</button>
</div>
<div>
<div class="collapse collapse-horizontal" id="collapsId">
<div class="card card-body" style="width:50%;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</section>
</template>
But the transition to expand the .card does not work correctly. At first the .card has the whole height of the page and then suddenly it expands completely to 50% width! If I use style="width:500px;" instead of style="width:50%;", that works correctly. Could any developer please help me why it does not work with relative width? Bootstrap docs said:
Feel free to write your own custom Sass, use inline styles, or use our width utilities.
But that does not work correctly!
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
Here We have one confusion.
Can I use bootstrap3 classes in bootstrap 4 version
Example: panel, pull-right, col-xs-4
in my excising project. I used these classes. can I go with same or replace with new classes(panel-card).
In Bootstrap 4-
(1) panels, wells, and thumbnails have been replaced by cards.
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
(2) pull-left and pull-right are replaced by float-left and float-right.
(3) .col-xs-4 is now .col-4
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I'm attempting to create a button with Bootstrap and Font Awesome, the catch is I want to have descriptive text below the stacked icon itself. All of the examples are left and right is anyone putting text below?
I've begun playing with it at url below, but any jump start suggestions are appreciated.
http://www.bootply.com/86861
Didn't really any solution within the BS, Font awesome approach, so I went ahead and wrapped several parts with divs and did the styling that way.
<div class="ecGlobalNavStudentPanelBtnWrapper">
<div class="ecGlobalNavStudentPanelBtn"> <span class="icon-stack floatButton"> <i class="icon-check-empty icon-stack-base"></i> <i class="icon-archive"></i> </span> </div>
<div class="ecGlobalNavStudentPanelBtnTxt hidden-xs">
<p>library</p>
</div>
</div>
what happens if you try <i class="icon-book">book</i> ?