This is a two part question. I am trying to emulate this mockup.
I am not quite sure how to do the slight left align of the text as well as adding a circular image in the gray circle area. Currently, my code in this area looks like this:
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
</div>
</div>
It looks like this:
How do I make it look remotely close to the mockup? (ignoring the font color and size)
Run below snippet in full page mode.
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col l8 s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a s;</p>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
<div class="col l4 s12 center"><img src="https://dummyimage.com/200x200/000/fff" class="circle">
</div>
</div>
</div>
</div>
Related
I have two cards One holding an image an another holding some text. The issue is when I resize the window to test for responsiveness, There is a lot of card space under the image. Is there a way to set card{
height : img height + 10px
}
using CSS?
<div class="container">
<div class="row">
<div class="col-6 card">
<div class="card-body">
<img src="../assets/" class="card-img-top" alt="...">
</div>
</div>
<div class="col-1">
</div>
<div class="col-5 card">
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
</p>
</div>
</div>
</div>
</div>
Instead of placing card on the col class, nest the card inside the column like this:
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<img src="../assets/" class="card-img-top" alt="...">
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-5">
<div class="card">
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
</p>
</div>
</div>
</div>
</div>
</div>
I'm printing a loop dynamically in a col-3. Each column contains 4 HTML elements.
An Image
A Title
Some text content
A button
Is it possible to make each elements top, line up with each other regardless of how many lines the element on top is?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
Personally, I would split the content into various rows, and put the columns inside those rows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container pt-5">
<div class="row">
<div class="col-12">
<div class="row" id="titles_row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="row" id="texts_row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
</div>
One option is to separate your <h3> and <p> into separate rows. That allows them to all be aligned horizontally.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
I have a big problem with my page and I can't find a solution anywhere. Could anyone help me?
When I try to add a well with elements inside my page sometimes need scrolling.
There is my code. Thank you.
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1> Some text</h1>
<div class="well">
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-12">
<img class="img-responsive" src="image" style="width:100%">
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<p class="tittle">Tittle</p>
<p class="font"> Nullam consectetur nunc massa. Praesent arcu libero, porttitor ut lacus nec, elementum sagittis est. Donec finibus ex eget nibh blandit, a gravida justo tincidunt. Integer efficitur risus et blandit molestie. Sed hendrerit accumsan faucibus.
Quisque urna ligula, ultrices et scelerisque sed, blandit sed ligula. Etiam odio sem, semper non ex sit amet, euismod pharetra dolor. Donec tristique quis neque vel tincidunt. Sed tincidunt, metus sed varius blandit </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have problem with my buttons when I resize the browser to under 1120px the buttons aren't responsive.
I don't know if my code is wrong or if I missed something else(?)
This is piece of my code :
<!-- Main content -->
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</dv>
</section>
<!-- /.content -->
pic 1 : more than 1120px
pic 2 : under 1120px
ss1
ss2
Based on the classes, I am assuming that you are using Bootstrap. If this is the case, you could add the classes col-xs-10 col-xs-offset-1 to your buttons:
ADMIN<br>
SISWA
Here is the full snippet, fully functional:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div> <!-- NOTE: I fixed a mis-closed div here -->
</section>
Also note that I fixed a mis-closed div.
I'm trying to create the layout below in Bootstrap 3.
I can achieve layout shown under 'sm', and with flexbox I want to swap div 1 and 2 for xs screens. The problem is when I make the containing div a flexbox, it pushes down div 3 on the sm layout, so that it is underneath div 2.
<!--[2 Column]-->
<div class="row flex-container">
<!--[DIV 2]-->
<div class="col-xs-12 col-sm-4 flex-item">
<p class="portfolio-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
</p>
</div>
<!--[/DIV 2]-->
<!--[DIV 1]-->
<div class="col-xs-12 col-sm-8 flex-item">
<!-- main image-->
<img class="img mb-20" src="img/6.jpg"/>
</div>
<!--[/DIV 1]-->
<!--[DIV 3]-->
<div class="col-xs-12 col-sm-8 flex-item">
<img class="img" src="img/1.jpg"/>
<img class="img" src="img/2.jpg"/>
<img class="img" src="img/3.jpg"/>
</div>
<!--[/DIV 3]-->
</div>
<!--/[2 Column]-->
And the CSS
.flex-container {
display: flex;
flex-wrap: wrap;
}
If I remove 'flex-container' from my containing div class, it then goes back to being as I would like it to be in the picture above. Is there a way to solve this so that I can have my correct layout for sm, even with flexbox?
I originally tried to solve this using Masonry, but a Stackoverflow user suggested flexbox instead (which I'd not used before) so hopefully I'm on the right track. If not.. any pointers would be grand!
Here is a JS Fiddle with the media query and flexbox ordering included.
Use the Boostrap grid columns like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4 pull-right">
<div class="well">
<h4>1</h4>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="well tall">
<h4>2</h4>
</div>
</div>
<div class="col-xs-12 col-md-4 pull-right">
<div class="well">
3
</div>
</div>
</div>
</div>
Demo: http://www.codeply.com/go/94pLz9xLab