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>
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>
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.
I'm using bootstrap 4 and I can't manage to center a button/link properly - no matter how I try to use text-center class (surround it with div or on the link)
<div class="row text-center">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
codepen here:
https://codepen.io/anon/pen/GdbPyr
Just add: justify-content-center to the parent component. The code will look like this:
<!-- ******Key Features****** -->
<section class="key-features ">
<div class="container pt-4">
<div class="row justify-content-center"style="background: red">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>
working pen: https://codepen.io/manAbl/pen/bMPOJM?editors=1000 ;
-- I added the background just to have a hint, that's something that really help me and allow me to have some perspective from time to time --
Hope helps :)
You can replace the text-center on your btn with mx-auto to force even left/right margins:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="key-features ">
<div class="container pt-4">
<div class="row">
<a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>
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>
So I'm trying to have two jumbotrons indicating two portals into my site. On a medium-large screen they appear side by side with spacing in between. On a tablet or mobile device I would like the jumbotrons to be stacked. The docs on the bootstrap 3 make this automatically happen when I shrink the page, however this isn't happening to me. I'm not sure what i'm doing wrong, I'm really new to bootstrap. Right now when it becomes a medium sized screen the white space disappears and they get squeezed side by side.
My html looks like this:
<div class="container-fluid">
<div class="row">
<div class="container special">
<div class="clearfix visible-sx"></div>
<div class="jumbotron text-center col-md-5 col-md-offset-1">
<h1>Become a Screener</h1>
<p>Yahh a screener.</p>
<a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-md-5 col-md-offset-1">
<h1>Have your books screened</h1>
<p>yah an author.</p>
<a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
</div>
</div>
</div>
</div>
Try changing your code to this:
<div class="container-fluid">
<div class="row">
<div class="container special">
<div class="clearfix visible-sx"></div>
<div class="col-sm-5 col-md-offset-1">
<div class="jumbotron text-center">
<h1>Become a Screener</h1>
<p>Yahh a screener.</p>
<a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
</div>
</div>
<div class="col-sm-5 col-md-offset-1">
<div class="jumbotron text-center">
<h1>Have your books screened</h1>
<p>yah an author.</p>
<a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
</div>
</div>
</div>
</div>
</div>
Simply create a div around jumbotrons with md-5 and offset class.