Is there something like Bootstrap panels in MaterializeCSS?
Bootstrap panels here:
http://www.w3schools.com/bootstrap/bootstrap_panels.asp
The closest thing to a Bootstrap panel would be called card-panel in Materialize CSS.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet"/>
<!--Card Panel-->
<div class="card-panel">
<span class="black-text">A Basic Panel</span>
</div>
Cheers
Panel and well are abonded by bootstrap in their upcoming v4.0
Bootstrap Developer Explains Here..
Basically Cards are much better replacements of panels and you can get same results in them.
<div class="row">
<div class="col s4">
<div class="card darken-1">
<div class="card-content ">
<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
</div>
</div>
</div>
however if you like the look and feel of bootstrap panel with different title background and different body background then you'll have to stick with bootstrap not materializecss
Related
I've been building the responsive card collection with Bootstrap 5 and vue 3. With the container and the row classes, I can make the cards align to each at the same level. However, to make the timestamp (card-footer) attached to the bottom, I also use h-100 within the card classes. The timestamp is rendered as expected, but there's a gap between each row if the content changes, illustrated below.
I want to make the card align vertically close to have the same gap between the cards.
Is there any way for doing vertical alignment with Bootstrap?
Here is part of the code for now (with vue3):
<div class="container">
<div class="row justify-content-center">
<div class="card h-100 shadow-sm mt-3 mx-1" v-for="(newsPiece, index) in newsCollection" :key="index">
<!-- image can toggle description -->
<img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
:data-bs-target="'#collapseImage'+index">
<!-- title -->
<h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
<!-- toggle content from image -->
<div class="collapse" :id="'collapseImage'+index">
<div class="card-body-noborder">
<!-- {{ newsPiece.description }} -->
<span v-html="newsPiece.description"></span>
</div>
</div>
<div class="card-footer">
{{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
</div>
</div>
</div>
</div>
As explained here, you're looking for a "Masonry" layout. The recommended method for Bootstrap 5 is to use the Masonry JS plugin.
I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>
Is "jagged" the best descriptor here? I'm not sure. I think the following screenshot and mockup explains it well enough. Basically, how do I get the desired UI with Bootstrap 3?
Markup (truncated for brevity)
<div class="row projects">
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
</div>
<div class="row projects">
<div class="project col-sm-4 text-center">
Project description and picture goes here.
</div>
</div>
Actual
Desired
This isn't a default functionality of Bootstrap 3. You'll need an external JS library. My personal preference is Isotope - http://isotope.metafizzy.co/
Is there a reason to have multiple rows?
Why not one row and multiple project DIVs in each column? :
<div class="col-sm-4">
<div class="project">Project description and picture goes here.</div>
<div class="project">Project description and picture goes here.</div>
</div>.
Project class can have top and/or bottom margin set as needed.
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />
I have a Question:
I´m using this template from MaterializeCss:
http://materializecss.com/templates/starter-template/preview.html
As you can see, there are 3 Icon section on this page, with three different icons.
My Question: Is there a way to replace this icons with a image (.png)
This is the code for the first Icon in the Icon Section:
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
I already tried it like this:
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
// HERE IS THE NEW PART
<img src="img/pic1.png" height="142" width="142">
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
But unfortunately the image is not shown centered...