Home / Questions / 181936
Accepted
Eduardo
Asked: 2020-07-18 02:19:21 +0800 CST 2020-07-18 02:19:21 +0800 CST

How to create a horizontally responsive bookmark using bootstrap?

  • 772

Looking around the web, I was able to structure the following responsive code, the only problem is that the style is messy, vertically:

.upcoming-section {
  text-align: center;
  padding: 93px 0 98px;
}

.upcoming-section .container {
  max-width: 900px;
  margin: 0 auto;
}

.upcoming-section h2 {
  text-align: center;
  color: #000;
  margin-bottom: 40px;
  font-weight: 600;
  letter-spacing: 1px;
}

.upcoming-section h4 {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  margin: 14px 0 0;
  text-transform: uppercase;
}

.upcoming-section span.date {
  padding-top: 10px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}

.upcoming-section span {
  display: block;
  text-transform: uppercase;
  font-size: 15px;
  margin-right: 0;
}

.upcoming-section .vs {
  color: #fbc02d;
  font-size: 25px;
  font-weight: 600;
  padding: 50px 0;
}
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<div class="upcoming-section">
		<div class="container">
			<h2>Upcoming Match</h2>
			<div id="upcoming" class="rs-carousel owl-carousel">
				<div class="item">
					<div class="col-md-4 col-sm-4 col-xs-12">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
 						<h4>Trirsal</h4>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-12">
						<span class="date">JUNE 16, 17:00</span>
						<span class="vs">VS</span>
						<span>Central Olympic Stadium</span>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-12">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
						<h4>Kapa Club</h4>
					</div>
				</div>
			</div>
		</div>
	</div>

As I had written the little flaw in the layout, when I resize the browser window, making it responsive makes the layout vertically messed up.

How can I make the design adaptable to any mobile device while keeping it horizontally responsive? Without any vertical disorder or other defect.

bootstrap

2 Answers

  1. Best Answer

    You already have the design, I'm just missing a small detail so that the same horizontal style is preserved, for this you must replace this: col-xs-12withcol-xs-4

    You can look a little more at the documentation with some very practical examples.

    .upcoming-section {
  text-align: center;
  padding: 93px 0 98px;
}

.upcoming-section .container {
  max-width: 900px;
  margin: 0 auto;
}

.upcoming-section h2 {
  text-align: center;
  color: #000;
  margin-bottom: 40px;
  font-weight: 600;
  letter-spacing: 1px;
}

.upcoming-section h4 {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  margin: 14px 0 0;
  text-transform: uppercase;
}

.upcoming-section span.date {
  padding-top: 10px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}

.upcoming-section span {
  display: block;
  text-transform: uppercase;
  font-size: 15px;
  margin-right: 0;
}

.upcoming-section .vs {
  color: #fbc02d;
  font-size: 25px;
  font-weight: 600;
  padding: 50px 0;
}
    	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<div class="upcoming-section">
		<div class="container">
			<h2>Upcoming Match</h2>
			<div id="upcoming" class="rs-carousel owl-carousel">
				<div class="item">
					<div class="col-md-4 col-sm-4 col-xs-4">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
 						<h4>Trirsal</h4>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<span class="date">JUNE 16, 17:00</span>
						<span class="vs">VS</span>
						<span>Central Olympic Stadium</span>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
						<h4>Kapa Club</h4>
					</div>
				</div>
			</div>
		</div>
	</div>

    • 2

  2. In fact, I see that there is a lot of code for what it really does, I have simplified this to give you an idea that not so much code is required to achieve something similar to what you want. I made it very simple, I hope it will serve as a guide for what you are trying to do.

    <!DOCTYPE html> 
<html>
	<head>
	<meta charset="UTF-8">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" crossorigin="anonymous">
		<style>
			@media screen and (max-width: 400px){
			.sp{
				font-size:12px;
			}
			
			.logo{
				width:50px;
				height:50px;
			}
			
			}	
		</style>
	</head>
	
	<body>
  	<div class="container">
		<div class="row">
			<div class="col-sm-12">	
				<div class="text-center">
                  	<span class="sp">Francia</span>
					<img class="img-responsive logo" src="https://ssl.gstatic.com/onebox/media/sports/logos/z3JEQB3coEAGLCJBEUzQ2A_96x96.png" alt="">
					<span class="sp">2</span>
					<span>VS</span>
					<span class="sp">1</span>
					<img class="img-responsive logo" src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
					<span class="sp">Croacia</span>
                </div>
				<div class="text-center">
					<span class="sp"> <input type="checkbox"> Mañana - 15 Julio 2018 - 10:00AM	</span> <br>
					<span class="sp">Estadio - Olímpico Luzhnikí</span>
				</div>
				
				<div class="text-center">
					<a href="" target="_blank"><span class="moto-widget-button-label sp">Ver detalles</span></a>
				</div>   	
			</div>
		</div>
  	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
	</body>
</html>

    • 1