I recently started to use html, css and bootstrap-4, I am trying to make a page with a nav-bar, 4 cards and a footer whit info, I used bootstrap to make the row and cols but it seems that they not align how I want. What can I do in this mess?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="MYCELIUM.CSS">
<link rel="stylesheet" href="activities.css">
</head>
<script src="https://kit.fontawesome.com/a8809e8f88.js" crossorigin="anonymous"></script>
<body>
<div class="col-md-4 col-sm-6 boxy" class="wrapper">
<div class="pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda">
<p><h2 class="activname">Guided hiking tours</h2></p>
<button class="activbutt" type="button" name="button">SEE DETAILS</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<p></p><br>
<div class="pop-up-2">
<div class="card-2">
<img class="girlimg" src="bike.jpg" alt="bikeactiv">
<p> <h2 class="activname1">Rent a bike(4 hours)</h2> </p>
<button class="activbutt1" type="button" name="button1">SEE DETAILS</button>
</div>
<div class="details">
<div class="duration1">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids1">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper1">
<div class="pop-up-3">
<div class="card-3">
<img class="girlimg" src="climbing.jpg" alt="clim">
<p> <h2 class="climbing">Climbing</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span>FULL DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
<div class="pop-up-4">
<div class="card-4">
<img class="girlimg" src="canoe.jpg" alt="clim">
<p> <h2 class="climbing">Canoe</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:6</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:2</p>
</div>
</div>
</div>
</body>
</html>
You have to make into a row like:
Basic structure:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
You can make it evolve like:
<div class="row">
<div class="col row mx-0">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
Related
So I have this 2 cards aligned the way i want whit bootstrap and display: flex;. When i try to do some some changes in CSS like moving the details class in middle, or to change the width and height of the card etc it won't work. How can i do it ? Here is the code:
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<div>
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
</div>
</div>
I think you should use the card class from bootstrap. https://getbootstrap.com/docs/4.0/components/card/. Then you will be able to change the default width & height of the card by overriding it from custom CSS.
So i have this card, i am not sure how to pace items in it the way i want. In the html code i have used bootstrap-3. Css is just noob basic pixels movement.
<body>
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<br />
.front {
display: flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<div>
<img class="girlimg" src="https://picsum.photos/250/150" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
This just uses flexbox, which is incredibly useful. If you want to learn more CSS-Tricks has a good article: A Complete Guide to Flexbox
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-2"></div>
<div class="col-2 Jumbooptions" id="create" onclick="location.href='#';">
<p class="efr">Create</p>
<i class="fas fa-plus fa-2x" id="ci"></i>
</div>
<div class="col-2 Jumbooptions" id="add" onclick="location.href='#';">
<p class="efr">Add</p>
<i class="fas fa-address-book fa-2x" id="ai"></i>
</div>
<div class="col-2 Jumbooptions" id="stats" onclick="location.href='#';">
<p class="efr">Statistics</p>
<i class="fas fa-chart-pie fa-2x" id="si"></i>
</div>
<div class="col-2 Jumbooptions" id="export" onclick="location.href='#';">
<p class="efr">Export</p>
<i class="fas fa-file-export fa-2x" id="ei"></i>
</div>
</div>
<div class="row" id="bigger">
<div class="col-2" id=""></div>
<div id="created" class="dropdown col-4">
<h2>CREATE</h2>
<p>as many sheets as you want with ease!</p>
</div>
<div id="addd" class="dropdown col-4">
</div>
<div id="statsd" class="dropdown col-4">
</div>
<div id="exportd" class="dropdown col-4">
</div>
</div>
</div>
</div>
CSS
height:70px !important;
width:700px;
margin-left:47px
}
If I make the "height" any more than 70 the rest of the row goes to the start of the jumbotron
When height is less than 70: https://gyazo.com/6601be928cb893b5355c78fbc792e694
When height is more than 70 (200): https://gyazo.com/6b6f96fa6eadcffc6db3dd427cac8d03
I'm really not sure what to do.
I'm trying to center two columns in a row in Bootstrap and no matter what offset or centering, they won't stay on same line in center of full-width column on md size or above
Tried col-md-6 offset and adding row-center and column-center classes, nothing has worked
Here's the full footer code - I want the email and tel to be on one line on larger screens and the two social icons alongside each other on the next row. It wraps nicely to display on mobile, just the larger screens I need some help with.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="container-fluid footer-container">
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5></a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i><h5>905-749-5700</h5></a>
</div>
</div>
<div class="row row-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</footer>
Add the 'text-center' class to your rows.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row text-center">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row text-center">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5>
</a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i>
<h5>905-749-5700</h5>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i>
</a></div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
According to docs try this way:
<div class="row justify-content-center">
<div class="col-*"></div>
<div class="col-*"></div>
</div>
I have a dashboard with a side-menu that I want to be fixed to the left. I tried doing a fixed position in css, but then all the divs get distorted and moved out of place. I then tried using bootstrap sticky-left, and it simply didn't work. I want for the left menu to stay fixed while the charts being scrollable.
CODE:
<div class="row head">
<div class="col-sm-2 sticky-left" id="side-bar">
<div id="side-nav">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-10 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart" >
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are looking for sticky-top sidebar.
.chart_container {
height: 500vh
}
ul {
list-style: none;
padding: 0
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row head">
<div class="col-sm-3 " id="side-bar">
<div id="side-nav" class="sticky-top text-center">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-9 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart">
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>