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>
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 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 position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -
This is my coded version -
I'm using the hr tag to create it as this seems the most straightforward way - here's the code -
hr {
display: block;
width: 250px;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div><hr>
</div>
</div>
</section>
The hr is already given a style in the framework, so if you give it a class like this, it will override the default.
The major reason why it is not exactly positioned vertically between the text and image part, is that the text row and image row has not the same top/bottom margin/padding, so I increased the margin-top/bottom a little, and the second hr, the one after the images, were placed within the row, so I moved it outside.
To get it exact in between, you have elaborate with the row's padding/margin.
Stack snippet
hr.hr250center {
display: block;
width: 250px;
margin-top: 2em;
margin-bottom: 2.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: red; /* here you set color */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr class="hr250center">
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
<hr class="hr250center">
</div>
</section>
You can use the option: 'padding-top' or 'padding-bottom'
<section id="welcome">
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div> <hr>
</div>
</section>
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>