Topic: Responsive Issue?
(image link)
This is how it should look:
(image link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<!-- Mask color -->
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2839%29.jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
</div>
<!--/ First slide -->
<!-- Second slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2837%29.jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
</div>
<!--/ Second slide -->
<!-- Third slide -->
<div class="carousel-item">
<!-- Mask color -->
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2841%29.jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
</div>
<!--/ Third slide -->
</div>
<!--/ Slides -->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</div>
</div>
<!--Grid row-->
<div class="row mt-3">
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<div class="row my-3">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at.</p>
</div>
</div>
<div class="row my-3">
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> add this and check it it corrct now.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No