In this executed normally in the maximized window but i think its not responsive because when i compress the window the design view as vertically one by one but i want horizontal view
<div class="col-md-12">
<div class="row-fluid">
<div class="col-md-3">
<span class="text-center"><b>SELLERS</b></span>
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-arrow-down">RATING</span>
</div>
<div class="col-md-3">
<span class="glyphicon glyphicon-arrow-up">DELIVERED BY</span>
</div>
<div class="col-md-1">
<span class="text-center">OFFERS</span>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-arrow-down">PRICE</span>
</div>
<div class="col-md-2">
</div>
</div>
</div>
This is correct. Currently your columns will stack when they hit the 'medium' breakpoint, which is 992 pixels according to the Grid table on the Bootstrap website. This means once your browser width slips below 992 pixels width it will revert to stacked.
You can change your col-md-* classes to be col-sm-*, this will make them change to stacked at the 'small' breakpoint, which is 768 pixels. For more information carefully read the documentation and examples here - http://getbootstrap.com/css/#grid
Related
I have replicate this code to get 2 column structure in which left side is image carousel and right side is some text, I got the text right but the carousel is not displaying, I am using bootstrap-5 and have linked correct bootstrap css and js, that's verified:
Here is my code:
<section class="tech-area analytics-area" id="analytics-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel goes here -->
<div id="feature-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner active">
<div class="carousel-item">
<!-- first image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img1">
</div>
<div class="carousel-item">
<!-- second image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img2">
</div>
<div class="carousel-item">
<!-- third image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img3">
</div>
<div class="carousel-item">
<!-- fourth image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img4">
</div>
</div>
</div>
</div>
<div class="col">
<!-- Right side text goes here -->
<h1>Best UI UX design with analytical dashboard and more…</h1>
<p>Template provide best designed and user experienced home page and analytical dashboard. Gives
rich feeling and easy use elements action available with different interface design.</p>
<ul>
<li>Menu push content and overlay menu also full screen menu provided.</li>
<li>Sticky Footer iconic footer menu and informative footer for inner page</li>
<li>Dark mode with Different color selection to match your brand and stay with trend.</li>
<li>Customer will get Framework choice with same design to build app.</li>
<li>We have built template with responsive layout grid , It gives small to large phone devices
and UI support back to tablet devices also.</li>
<li>Standard grid systems are easy to customize as per need which adds flexibility components
designs.</li>
</ul>
</div>
</div>
</div>
</section>
You added the active class in the wrong element. Instead of the carousel-inside element, the active class must be used to mark one of the carousel-item elements as the initial active one:
<section class="tech-area analytics-area" id="analytics-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel goes here -->
<div id="feature-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- first image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img1">
</div>
<div class="carousel-item">
<!-- second image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img2">
</div>
<div class="carousel-item">
<!-- third image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img3">
</div>
<div class="carousel-item">
<!-- fourth image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img4">
</div>
</div>
</div>
</div>
<div class="col">
<!-- Right side text goes here -->
<h1>Best UI UX design with analytical dashboard and more…</h1>
<p>Template provide best designed and user experienced home page and analytical dashboard. Gives
rich feeling and easy use elements action available with different interface design.</p>
<ul>
<li>Menu push content and overlay menu also full screen menu provided.</li>
<li>Sticky Footer iconic footer menu and informative footer for inner page</li>
<li>Dark mode with Different color selection to match your brand and stay with trend.</li>
<li>Customer will get Framework choice with same design to build app.</li>
<li>We have built template with responsive layout grid , It gives small to large phone devices
and UI support back to tablet devices also.</li>
<li>Standard grid systems are easy to customize as per need which adds flexibility components
designs.</li>
</ul>
</div>
</div>
</div>
</section>
I want to have my web layout setup like this on MD and larger:
img - content
content - img
But on a smaller screen I want the content to come first and then the image, like so:
content
img
I can do this with this line of code on my row where the row is img-content:
flex-column-reverse flex-md-row
But all of this is dependent also on how I order the HTML, I am using vue components, so I dont want to change my html order, it might add too much complexity
So I keep the HTML order consistent.
This is my code:
<div class="row p-5 flex-column-reverse flex-md-row">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title ">lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
// Next row
<div class="row p-5 flex-column-reverse ">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title "> lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
here is the setup in jsfiddle
The reverse class does reverse the order but The problem with this approach is for some odd reason, the next row that should be content-img, the image gets pushed to the next line.
Anyone got any idea why and how to have it not push to the new line?
A little bit of back n-forth found out the solution.
flex-column-reverse
-is a vertical reverseŕ,thus its always pushing it to the new line, so having it be the only one on it, our row doesn't know to change on a larger size so we add this:
flex-md-row-reverse
note the row in it, since we are setting it, horizontally
If you want content / image – content / image on small screens, then you should set the order that way. Then, to have the content and images switch place on larger screens, add order-md-first to the even lines.
I’ve modified the code from your Fiddle:
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title ">Title 1</h2>
<p class="about-p text-muted">Desc 1</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper">
<h2>MY IMAGE1</h2>
</div>
</div>
// Next row
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title "> Title 2</h2>
<p class="about-p text-muted">Desc 2</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper order-md-first">
<h2>MY IMAGE2</h2>
</div>
</div>
</div>
I want to make close function of card-reveal like FAB button.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Here is my JSFiddle
What I need? Although material design Icon now work in this example, I need to make "close" button as fab. It means, even card-reveal content scroll down, close button keeps position in card-reveal section and visible.
Is it possible?
The nature of the card component seems to make this tough to achieve without getting hacky and mixing strange CSS properties. I think the best I can achieve that still looks pleasing is a FAB that travels up and down with the card-reveal. Another solution may exist, but it may not be as clean.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Card Title
</span>
<a class="activator btn-floating red right"></a>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title
<a class="card-title btn-floating red right"></a>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
I wanted my panel heading to contain some text and a button, the former being left-aligned and the latter, right-aligned. But as soon as I apply the class row to my panel header, it breaks out of the parent div and takes up what I believe to be the container width.
Here's the code I'm using:
<div class="panel panel-primary">
<div class="panel-heading row">
<h4 class="col-md-11">Manage Your Subscriptions</h4>
<div>
<a href="#" class="btn btn-default col-md-1" >Log out</a>
</div>
</div>
<div class="panel-body">
</div>
</div>
And here's the result:
How can I correct this?
It seems to me like you just need to move the "row" to be inside the "panel-heading" rather than on the same level, as they both have relative CSS positioning properties. I tried the following code:
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<h4 class="col-md-11">Manage Your Subscriptions</h4>
<div class="col-md-1">
<a href="#" class="btn btn-default" >Log out</a>
</div>
</div>
</div>
<div class="panel-body">
Stackoverflow rocks!
</div>
</div>
and it gave me this output (which is what you're looking for, I hope):
I hope that helps
EDIT: I tried using "pull-right" as others have suggested and it seems to create more troubles as it messes the top/bottom margins as well since it makes the display block relative to container (Which I would generally recommend against doing, even if it works for you).
EDIT2: moved the "col-md-1" class into an encapsulating "div" to solve the button's margins' issue.
May be you need something like following?
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-10 col-sm-10">
<h4>Manage Your Subscriptions</h4>
</div>
<div class="col-md-2 col-sm-2">
<a href="#" class="btn btn-default pull-right" >Log out</a>
</div>
</div>
</div>
<div class="panel-body">
</div>
</div>
Let me know if it works
You can use pull-left and pull-right instead of grid system, so the components will be rendered on single line even on small screen (if there is enough space):
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="pull-left">Manage Your Subscriptions</h4>
<span class="pull-right">
<a href="#" class="btn btn-default" >Log out</a>
</span>
<div class="clearfix"> </div>
</div>
<div class="panel-body">
</div>
</div>
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle