With the reference to the subject, I cannot put each object which should be bracketed by the i tag. I would like to align it side by side. However I used a li tag and float:left and right on CSS, it was not changed. Does anyone know how to change the position?
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="img/logo.png" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<i class="fa fa-play icon-left" aria-hidden="true"></i>
<p>受講後</p>
<i class="fa fa-play icon-right" aria-hidden="true"></i>
</div>
I used bootstrap classes to align items without changing much in DOM. Please check on the link to get more knowledge on Bootstrap Classes.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<div class="d-flex align-items-center justify-content-center">
<i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
<p class="mb-0">受講後</p>
<i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i>
</div>
</div>
</div>
</div>
</section>
Was there a reason you didn’t want to put the icons in the p tag?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="mypassion-section" class="bg-light text-muted py-5">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
<h3>生徒さんの成長</h3>
<p>OOOOO様 <br>受講前</p>
<p><i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
受講後
<i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i></p>
</div>
</div>
</div>
</section>
It was good that you included some code in your question, but it's better to use the snippet tool to include things like the Bootstrap and Font Awesome CSS files and to provide a running example of what you have so far.
Related
Image attached is the button from display of two different sizes (24inch and 13inch), button on 24inch display appears normal whereas add to cart button on 13inch display is broken.13inch display button 24 inch display button
<div class="row my-5" id="3">
<span id="lblArtworkId" style="display: none;">3</span>
<div class="col-2">
<div class="d-flex justify-content-center">
<a href="./">
<img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
</a>
</div>
</div>
<div class="col-6">
<div class="h-100 d-flex flex-column justify-content-between">
<span>
<a href="./" class="text-decoration-none text-muted fs-4">
Construction in Red, Blue & Yellow Drawing
</a>
</span>
<hr>
<p class="m-0">Artist: Karin White</p>
</div>
</div>
<div class="col-2">
<div class="h-100 d-flex align-items-center justify-content-center">
<span class="fw-bold">$ 1120.00</span>
</div>
</div>
<div class="col-2">
<div class="h-100 d-flex align-items-center justify-content-between">
<button id="btnRemove" class="btn btn-outline-danger">Remove</button>
<button id="btnCart" class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div>
Welcome to stackoverflow.
You can use cols with a breakpoint prefix to adjust the layout. (e.g. col-xxl-2 col-3). Read Bootstrap Breakpoints and Grid options for more information. Also, since Bootstrap is sensitive to pixels, it is much better to consider pixels instead of inches.
Example:
<div class="container">
<div class="row my-5" id="3">
<span id="lblArtworkId" style="display: none;">3</span>
<div class="col-xxl-2 col-3">
<div class="d-flex justify-content-center">
<a href="./">
<img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
</a>
</div>
</div>
<div class="col-xxl-6 col-9">
<div class="h-100 d-flex flex-column justify-content-between">
<span>
<a href="./" class="text-decoration-none text-muted fs-4">
Construction in Red, Blue & Yellow Drawing
</a>
</span>
<hr>
<p class="m-0">Artist: Karin White</p>
</div>
</div>
<div class="col-xxl-2 col-4">
<div class="h-100 d-flex align-items-center justify-content-center">
<span class="fw-bold">$ 1120.00</span>
</div>
</div>
<div class="col-xxl-2 col-8">
<div class="h-100 d-flex align-items-center justify-content-between">
<button id="btnRemove" class="btn btn-outline-danger w-50 mx-1">Remove</button>
<button id="btnCart" class="btn btn-primary w-50 mx-1">Add to Cart</button>
</div>
</div>
</div>
</div>
Edit
Don't forget to include the required meta tags:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-6 pull-left">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-12">
<span class="col-xs-6 pull-left">Ingredient</span>
<span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
</div>
<div>
<div>
Pull-right works fine for cooking details line, but for ingredient and quantity I am unable to format it with pull-right/float: right.
I am expecting quantity to be at the end of the div it is in. It is getting the 50% width but float:right is not working
Bootstrap 3: https://www.codeply.com/p/OSJMu17P9a
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-6">
<span class="pull-left">Ingredient</span>
<span class="pull-right" style="padding-right:0px">Quantity</span>
</div>
</div>
Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#
<div class="col-12" style="padding:0px">
<div class="col-12"><strong>Cooking Details</strong></div>
<div class="col-6">
<span class="float-left">Ingredient</span>
<span class="float-right" style="padding-right:0px">Quantity</span>
</div>
</div>
I'm not sure if you wanted something like this. When you add the col you have to use a div with row class a wrapper
#EDITED: WAY BETTER SOLUTION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<div style="padding: 0px;">
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="pull-left">Ingredient</span>
<span class="pull-right">Quantity</span>
</div>
</div>
Or Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="float-left">Ingredient</span>
<span class="float-right">Quantity</span>
</div>
</div>
I trying to update my website and would like to have two jumbotrons side by side but they keep rendering in stack position?? What am I missing?
borrowed code from another thread:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="container">
<div class="jumbotron text-center col-md-6">
<h1>Become Awesome</h1>
<p>Here you will learn how to become awesome.</p>
<a class="btn btn-danger pull-right" href="{% url
'awesome_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-md-6">
<h1>Here you will learn how to become super rad.</h1>
<p>Tubular dude.</p>
<a class="btn btn-success" href="{% url 'rad_info' %}"
role="button">More Info</a>
</div>
</div>
</div>
Need to change your markup.
Open snippet in full-screen
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="jumbotron text-center">
<h1>Become Awesome</h1>
<p>Here you will learn how to become awesome.</p>
<a class="btn btn-danger pull-right" href="{% url
'awesome_info' %}">More Info</a> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="jumbotron text-center">
<h1>Here you will learn how to become super rad.</h1>
<p>Tubular dude.</p>
<a class="btn btn-success" href="{% url 'rad_info' %}"
role="button">More Info</a> </div>
</div>
</div>
</div>
I want to conceal column that col-md-0 in my screen on md size.
But It shows my screen . How can I hide that?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
is exist in my <head>tag
<div class="container-fluid top-nav">
<div class="row">
<div class="hidden-xs hidden-sm col-md-1 left-fixed-bar">
나왔다가 숨겨질 부분.
</div>
<div class="col-xs-1 col-sm-1 hidden-md left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<!-- End of left part -->
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
나왔다가 숨겨질 부분.
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
숨겨져있다 나올 부분
</div>
<!-- End of center part -->
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- End of right part -->
</div>
</div>
Actually there is no class such as col-md-0 for your purpose you wll need to write a media query and set width: 0%; on the medium screen resolution. or you can use the hidden-md class for your requirement. Which will hide your div im medium resolution. I have attached the code spinet for you.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<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>
</head>
<body>
<div class="container-fluid top-nav">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
EMPTY
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
TITLE
</div>
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid top-nav">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 left-fixed-bar">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="hidden-xs hidden-sm col-md-8 center-fixed-bar">
EMPTY
</div>
<div class="col-xs-9 col-sm-9 hidden-md">
TITLE
</div>
<div class="col-xs-2 col-sm-2 col-md-3 right-fixed-bar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:
<div class="row">
<div class="col-md-4 center-block">
<div>
<i class="glyphicon glyphicon-time center-text"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-star center-text"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-heart center-text"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?
You need to use text-center instead of center-block.
There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center">
<div>
<i class="glyphicon glyphicon-time"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-star"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-heart"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>