I am trying to add a progress bar in the white space below the centered logo. But since I am using container-fluid I cant use "align-items-end" because for some reason it extends the container height more. Can someone tell me how I should change this so I can add a progress bar below the logo and not mess up the "Create" and "Explore" positioning? In this JSFiddle link, I have added the code I'm using.
https://jsfiddle.net/mrwadepro/zzf5j3fm/13/
Below is the progress bar I'm trying to add
<div class="row align-items-end">
<div class="row">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
You had a Bootstrap .row immediately nested within another .row. You should never ever do that. When nesting a .row must always be followed by at least one Bootstrap column. And besides, nesting is totally unnecessary in this case.
You are also using a lot of unnecessary custom css. Unnecessary because those tasks can be done by using native Bootstrap 4 classes. When you introduce unnecessary custom css hacks, you'll inevitably need more custom css hacks to fix the problems caused by the original css hacks.
Here's a clean code snippet that does the job without needing any custom css and without the align-items-end class (click "run code snippet" below):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col text-center">
<img src="http://i65.tinypic.com/29kpg7p.png" width="100" height="140">
</div>
</div>
<div class="row align-items-center">
<div class="col-6">
<a href="#" name="redirectCreate" onClick="redirectCreate()">
<h1 class="text-center">
Create</h1>
</a>
</div>
<div class="col-6 text-center">
<a href="#" name="redirectExplore" onClick="redirectExplore()">
<h1 class="text-center">
Explore</h1>
</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
Related
Beneath is some code for a website I am working on.
<div
class="container-fluid px-0">
<!-- row start -->
<div class="row no-gutters align-items-center h-full">
<div class="col-lg-3 offset-lg-2 col-md-8 offset-md-2 col-sm-10 offset-sm-1 sm:px-20 z-2">
<div class="masthead__content">
<div data-split="lines" data-split-page-reveal class="mr-minus-lg md:mr-0">
<h1 class="masthead__title fw-700 text-white js-title">
Title
</h1>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
Subtitle
</p>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow "></span>
</span>
<span class="button-text">Learn More</span>
</button>
</p>
</div>
</div>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 offset-lg-1 z-1">
<div data-parallax="0.7" class="masthead__img overflow-hidden h-100vh ml-minus-sm md:ml-0">
<div data-parallax-target class="bg-image js-lazy js-image" data-bg="img/index/light.jpg"></div>
<div class="masthead__img__cover js-image-cover"></div>
</div>
</div>
</div>
<!-- row end -->
</div>
Currently the div columns are situated as shown in the image beneath:
How can I change my bootstrap columns so that the first div actually overlaps the second (desired output shown in screenshot)
I know a resolution to this can be done purely through bootstrap and would greatly appreciate any help with this. I have tried changing the col-lg-x sizes, however, this only changes the width of the columns. I am also unable to find a solution to this online.
While it’s a little difficult to understand what you’re trying to do without an operational version of your code (as #Grumpy was asking), but if all you need is to have part of your left-side column overlap part of your right-side column, then you can do that by using absolution positioning on the left-side column and offsetting the right-side column.
I setup a quick example using some different column sizes for different widths
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-lg">
<div class="row position-relative vh-100">
<div class="col-9 col-sm-8 col-md-7 position-absolute vh-100" style="background-color: rgba(255, 128, 149, 0.5); z-index: 1;">
<p class="Left-right">Left Text</p>
</div>
<div class="col-4 col-sm-5 col-md-6 offset-8 offset-sm-7 offset-md-6 bg-primary vh-100">
<p class="text-right">Right Text</p>
</div>
</div>
</div>
The left-side background-color is setup with an alpha of 50% so you can see the overlap area.
You didn't say which version of Bootstrap you're using, so I used Bootstrap 4.
I'm trying to create a layout that looks like the component on the image.
It's a 12 col bootstrap grid. I'm looking to make the text take up 6 cols, 1 col spacer in-between the text and the last col, and then I'd like the last col (image) to take up the rest of the horizontal space, in and out of the container.
I've trying mixing the container and container-fluid classes (not advisable according to Bootstrap docs) and it doesn't work.
How would one achieve this type of a layout using Bootstrap 4?
Image:
Existing code:
<div class="info-side">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1">
</div>
<div class="col-5">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
try this
<div class="info-side" >
<div class="container">
<div class="row col">
<div class="col-6 bg-info">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1 bg-warning">
</div>
<div class="col-5 bg-info">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
I added col to class row #div tag. It expands to all space available.
In another hand, mix containers regular and fluid is possible, but you have to take care of hierarchy: fluid is widest as regular, so regular must be included alone or inside a fluid class.
See this answer: link
Good Luck!
I've come to the following solution which creates the layout in my original image in the question.
I had to make one row position absolute, this way the two containers are overlapping each other.
<div class="info-side">
<div class="text-side container" style="position: relative;" >
<div class="text-area" style="position: absolute;">
<div class="row">
<div class="col-6 d-flex align-items-center" style="height: 600px;">
<div class="text-items">
<h2>#Model.TitleText</h2>
<p>#Html.Raw(Model.AreaText)</p>
</div>
</div>
</div>
</div>
</div>
<div class="image-side container-fluid">
<div class="row">
<div class="col-7"
<div class="col-5" style="height: 600px; ">
<img src="#Model.Image.Url" alt="#Model.Image.AlternativeText">
</div>
</div>
</div>
</div>
I have a bootstrap row on my page that's divided into three columns. I wanted to add some space between the 3 columns and split each individual column internally into 2 parts. After extensive Googling, this is what I arrived on
<div class="container row h-100 mx-auto" style="margin-top: -60px;">
<div class="col-sm-4 ">
<div class="mx-3">
<div class="" style="width:50%; float: right;">
<h4>About Us</h4>
<p>Find out more about our team of working professionls</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3 rounded">
<div style="width: 50%; float: left;">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div style="width: 50%; float: right;">
<h4>Our Purpose</h4>
<p>Come up with some stuff to be put in here</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3">
<h4>Our products and services</h4>
<p>Check out our vast array of products and services that we offer.</p>
</div>
</div>
</div>
Here's how it looks:
Ignore the three blue lines, that is experimental code.
Now it all works fine except I can't add a background colour to my columns. Every time I try adding any colour, it just doesn't show up. I write the line something like this:
<div class="mx-3 rounded" style="background: red;">
Now apart from this, I have a .card class defined in my main CSS file, it goes as follows:
.card{
border-radius: 15px;
}
That's it. Adding this class gives a rounded edge to a div (column) and adds a white background. However, every time I do that, the spacing is gone and the content inside my columns just sticks to the left instead of floating left and right.
How can I add a background to these columns without breaking any formatting? Or does anyone have an idea what's going on here?
First of all, I would suggest you should only have rows inside containers. If you put .container and .row together, the Bootstrap grid system doesn't work anymore because rows don't have the flexbox container parent.
Secondly, if you want 2 columns internally, why not declare a row and 2 columns? You've used that to create 3 column outer layout already. Using inline styles with floats defeat the purpose of using Bootstrap flexbox style grid system:
<div class="rounded">
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
You can also utilize the built-in .card class to help you with the paddings:
<div class="row">
<div class="col-sm-4">
<div class="card border-0">
<div class="card-body">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<h4 class="card-title">Our Purpose</h4>
<p class="card-text">
...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
To add background color to the .card, it's as easy as putting background color classes in:
<div class="card border-0 bg-danger">
...
</div>
demo: https://jsfiddle.net/davidliang2008/ed8bav14/36/
I need to show percentage of the Bootstrap progress bar on the left side like this:
Now I have this:
My HTML:
<span>76%</span>
<div class="progress bar-wrapper">
<div class="progress-bar skill-bar" role="progressbar" style="width: 76%"
aria-valuenow="76"
aria-valuemin="0" aria-valuemax="100">Photoshop
</div>
</div>
Any way I can put in on the left side outside the bar? Using Bootstrap 4
Simply create a flex container since you are using V4 of Bootstrap:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex align-items-center p-2">
<span class="p-1">76%</span>
<div class="progress bar-wrapper w-100 ">
<div class="progress-bar skill-bar" role="progressbar" style="width: 76%" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">Photoshop
</div>
</div>
</div>
I have a bootstrap grid system on my page and want two elements pulled to the right, but placed one below the other. This is the code I have right now. I want "Active" and "Primary" button place one below the other, but also pulled right. As of now, it looks like this:
If I were to add this to the button, then it aligns properly, but on mobile, it messes up.
<button type="button" class="btn btn-w-m btn-primary" style="margin-left: 261px;">Primary</button>
This is what I have so far. What can I do to achieve the desired result?
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-md-3">
<h2 class="pull-right" style="margin-top: -5px">Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
You do not need pull-right at all - all you need to right align the text of the heading and the button is text-align:right in the css or the text-right class on the parent div. Note that you need to open this snippet in "full screen mode due to the small size of the preview window.
I would also suggest that you put the css in its own style sheet rather than inline style rules. If you use text-align: right as a style rule then you can use a media query to apply it or left align on certain screen sizes as required.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<div class="container">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-xs-3 col-md-3">
<h4>Dummy Name</h4>
<small>Dummy Street</small><br>
<small>Dummy Apt, Some City, Some State</small><br>
<small>United States</small><br>
</div>
<div class="col-xs-3 col-md-3">
<h5>123-456-7890</h5>
</div>
<div class="col-xs-3 col-md-3">
<h5>some_name#somecompany.com</h5>
</div>
<div class="col-xs-3 col-md-3 text-right">
<h2>Active</h2><br>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
</div>
</div>
</div>
</div>