I'm working on my personal website and in my skills section, I want to put a row of icons at the top of the container. However, when I attempt to put a row-fluid on top, I run into issues.
I've attached the relevant code and screenshots for reference. Any help is appreciated!
<!--SKILLS DESCRIPTION -->
<div id="skillswrap">
<div class="container">
<div class="row">
<div class="wow fadeIn" data-wow-duration="5s" data-wow-offset="100">
<div class="col-lg-2 col-lg-offset-1">
<h4 style="color:white"><b>SKILLS</b></h4>
</div>
<div class="row-fluid">
<p><img class="img-responsive" src="Theme/assets/img/html5.png" alt="" style="zoom:60%"></p>
</div>
<div class="col-lg-3 centered">
<p><b>Front End Programming Skills</b></p>
<h5>HTML, CSS, JavaScript, Bootstrap, JQuery, AngularJS, Ionic Framework, D3
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Scripting Language Skills</b></p>
<h5>Python, Ruby</h5>
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Object Oriented Experience</b></p>
<h5>Java, C++</h5>
<br>
</div>
<div class="col-lg-3 col-lg-offset-3 centered">
<p><b>Communication</b></p>
<h5>Strong writing, collaborative and interpersonal skills.</h5>
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Software</b></p>
<h5>Exposure to: Postman, JetBrains IDEs, Eclipse, Version control w/ Git, Adobe Creative
Suite.</h5><br>
</div>
<div class="col-lg-3 centered">
<p><b>Diverse Technical Skills</b></p>
<h5>Programming, agile methedologies, QA testing, content management, data analytics</h5>
<br>
</div>
</div><!--/.row -->
<br>
</div><!--/.container -->
</div>
</div><!--/ #skillswrap -->
You either are going to have the offset or push bootstrap classes to push the image right i.e.: adding col-lg-offset-1 to class,
OR
Do it yourself via the position css attribute i.e.: position:relative;left:10px
http://getbootstrap.com/css/ for more info on how to use offset, push classes.
Related
So I've tried a few of the solutions provided here (and elsewhere on the web) to see if I could break out of the bootstrap container, but I'm not having any luck. To describe it, I have a .fluid-container to put a full-width background behind a normal .container. Where things get tricky is that I need the first column in .container to break out and extend all the way to the left edge of the screen.
What it should look like:
What I've gotten it to do:
Here's my HTML:
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="container">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
Form content goes here.
</div>
<div class="col-1"> </div>
<div class="col-2 text-white">
<p class="avenir text-limegreen text-upper">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Social</p>
</div>
</div>
</div>
</div>
To reiterate -- the goal here is to move the left edge of the lime green box all the way to the left edge of the screen, without moving the right edge out of the grid system or screwing with the rest of the layout.
All CSS is straightforward Bootstrap 5, with the exception of a few things to control color like .bg-limegreen.
Bootstrap layouts should never have immediately-nested containers. Instead, use standard row/column nesting. Avoid trying to "break out" of anything unless you actually need overlap across columns. That's rarely the case.
Also note that I replaced some of your custom classes with existing Bootstrap classes (text-light and text-uppercase). You'd be wise to get to know what Bootstrap offers very well to avoid building redundant CSS technical debt. See Bootstrap's text utilities.
I'd also encourage you to override Bootstrap's semantically-named classes for color rather than creating new, non-semantic ones. For example, text-limegreen might instead be an override of text-success, even if just for the footer. Have a look at Bootstrap's color utilities.
.bg-darkblue {
background: darkblue;
}
.bg-limegreen {
background: limegreen;
}
.text-limegreen {
color: limegreen;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
<div class="row justify-content-end">
<div class="col-8 text-light">
Form content goes here.
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-6">
<div class="row justify-content-start text-light pt-2">
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Social</p>
</div>
</div>
</div>
</div>
I'm trying to display some objects in 3 columns using Bootstrap 4. When using this code it only appears in 1 column, like this: web 1 column.
But my idea is to be displayed like this (more or less): web template 3 columns.
<div class="row-mt-5">
<div ng-repeat="woman in women">
<div class= "col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
I want to learn to use Bootstrap classes for object positioning.
First you need to know about the basic layout structure, learn it here, Please note that you need to define the grid layout for all the screens (sm md lg xl) the details are found in the link provided. Please refer to the below fiddle the code fix for your issue. I have included the ng-app and ng-controller for testing purposes, please ignore that.
HTML:
<div class="container-fluid" ng-app="myApp" ng-controller="MyController">
<div class="row">
<div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text">
<h5>{{woman.field}}{{woman.job}}</h5>
</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
JSFiddle: here
<section class="container">
<div class="row">
<div class="col-md-8">
<h4>Het Parool</h4>
<h2>Help users choose the best online experience</h2>
</div>
<div class="col-md-4 float-md-right">
<img class="preview" src="img/parool-half.png" />
</div>
<div class="col-md-6 float-md-left">
<a class="btn btn-default" href="parool.html" role="button">Link</a>
</div>
</div>
</section>
I'm new to bootstrap and I am not totally getting the grid system.
I made a design here for desktop Desktop version
And I want it to become this on mobile Mobile version
Can someone explain to me how I can do this?
Thanks a lot!
I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->
I have problem with the Bootstrap grid system on my new website /services-page (kenpils.se.
I would prefer 3 rows with 2 columns instead to make the text in the columns better readable on tablet. Right now the columns are to narrow due to the icon on the left side of each column.
As far as I understand, each row is one div which makes it difficult to slide up the "commercial-column" next to the "editorial-column". There is also a divide30-class between the two rows.
Would appreciate some advice.
The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
This will provide the formatting you desire. Hope this helps.
NOTE: THE BELOW SOLUTION DOESNT ALTER THE LAYOUT AT ALL as you require. It provides an alternative solution !
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
This means that the break wont occur until the width reduces below tablet-zone !
col-sm-4 -> break after tablet-zone width
col-md-4 -> break after normal desktop width
Replace it with
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
This makes sure that the break occurs at the tablet level itself!