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...
Related
We've built a website using bootstrap. We're checking the responsiveness of the site and have encountered an issue with an image "floating" on top of the page when we inspect the page and go to toggle device toolbar and change the setting to "iPad." Our site functions as expected on the desktop, mobile (galaxy, iPhone x, etc), and even iPad Pro settings.
.our-story {
color: #fff;
background-color: #67b7f2;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid pt-5">
<div class="row our-story">
<div class="col-md-6 offset-md-1 mb-3">
<h2 class="mt-5">We Move Lives</h2>
<p>Our process begins with asking a lot of questions and listening to your needs and concerns. Then we survey your entire home and assess everything that needs to be moved. We identify high-value, fragile items such as pianos, antiques, paintings, and chandeliers that will require special care. Finally, we create a detailed schedule for packing, loading, and delivery.</p>
<button type="button" class="btn btn-outline-tosa">Our Story</button>
</div>
<div class="col-md-4">
<img src="img/steve-justin-bruce-standup.png" class="img-fluid mt-5">
</div>
</div>
</div>
Ah ok, so yea I'd suggest something more like this, notice the margin -> padding changes and the flex-end on the img container cell. Without giving the image some sort of a bottom anchor it's just doing as expected.
Oh and embedding a button in an anchor is no bueno, Cheers
.our-story {
color: #fff;
background-color: #67b7f2;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row our-story">
<div class="col-md-6 offset-md-2 pb-3 pt-5">
<h2>We Move Lives</h2>
<p>Our process begins with asking a lot of questions and listening to your needs and concerns. Then we survey your entire home and assess everything that needs to be moved. We identify high-value, fragile items such as pianos, antiques, paintings, and chandeliers that will require special care. Finally, we create a detailed schedule for packing, loading, and delivery.</p>
<a class="btn btn-outline-tosa" href="about-us.html">Our Story</a>
</div>
<div class="col-md-4 d-flex flex-end justify-content-center pt-5">
<img src="https://picsum.photos/seed/picsum/200/300" class="img-fluid">
</div>
</div>
</div>
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I was wondering how can I add an iframe between the header and the footer of my webpage, I mean in the blank between the header and footer. I tried height 100% but it overrides the header! I am using the template from http://materializecss.com/templates/starter-template/preview.html. Can anyone help please? Thanks
Use CSS position and top to position the iFrame below the header.
Try using
position:absolute;
top:65px;
left:0px;
See here:
http://www.w3schools.com/cssref/pr_pos_top.asp
http://www.w3schools.com/css/css_positioning.asp
To add an iframe in HTML between the header and footer, you will place this code, but change the source to whatever you want to point it to.
<iframe src="http://www.unlocktheinbox.com"></iframe>
The width and height, if set to 100% is going to be confined to the parent elements on you form, which looks like one of your DIV's.
So on your example page, remove this code.
Replace this code with.
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- 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>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
With
<iframe src="http://www.unlocktheinbox.com" width="100%" height="100%"></iframe>
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.
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