0

I am making a webpage in HTML and CSS which have to be replicated exactly like this image. enter image description here

At this moment, I am able to get this in fiddle.

The problem with the fiddle is: it (text and a rectangle(with some text)) is getting aligned at the left-side and right-side center of page whereas I want to bring them at the center of a page (with some distance between the two) as shown in the image. The HTML code which I am using is: 

<div class="sections">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 left-side"> <a href="">Development & Design</a></div>
            <div class="col-lg-6 right-side"> <a href="">Web Designer Qualifications Go here</a></div>
        </div>
    </div>

I am wondering whether do I need to .col-lg-6 class as I have used above to replicate an image ? If not then do I need to use col-lg-offset-1 in my HTML code in order to replicate an image ?

Iqbal hossain
  • 1,778
  • 3
  • 17
  • 24

2 Answers2

0

At least for the size of screen that you're doing it col-lg you can get it to work by using justify-content-center in the wrapping <div>. What this does is that it moves the empty space to the sides of both elements, bring in them together to the center. I used col-lg-4 in my case, but if that is too small for you you can adjust it to your needs.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="sections">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-3 left-side"> <a href="">Development & Design</a></div>
      <div class="col-lg-3 right-side">
        <a href="">Web Designer</a>
        <!-- list requested in the comments Here -->
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </div>
  </div>
</div>

You can find more info on Bootstrap Doc

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Edgar Henriquez
  • 1,373
  • 1
  • 14
  • 17
  • It did work, thanks. I have a question, the sum of the values should be 12 in bootstrap grid system but in this case it is 6 (col-lg-3 + col-lg-3) ? Is it right ? –  Aug 26 '17 at 17:40
  • 1
    Yes, that's not a problem since you're wrapping those 2 elements inside a row. If this solved your question please mark it :) – Edgar Henriquez Aug 26 '17 at 17:44
  • Just checking, when should it be 12 ? In the w3schools [tutorial](https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp), everytime it is 12. Also in this [tutorial](https://getbootstrap.com/docs/4.0/layout/grid/) as well, it is 12. –  Aug 26 '17 at 17:47
  • 1
    It just means the maximum should be 12 per row. if you have `col-lg-3` 4 times inside a `row` it will be in the same row, however if you add another `col-lg-3` that last element will be pushed down to the next line. – Edgar Henriquez Aug 26 '17 at 17:52
  • Ok. so it means the maximum should be 12 i.e. the sum can be 6, 9 and 12 not more that. –  Aug 26 '17 at 17:54
  • 1
    If you want everything in the same row that's correct. – Edgar Henriquez Aug 26 '17 at 17:56
  • 1
    No, there's no min or max of 12 per `row`. Please [read this](https://stackoverflow.com/documentation/s/e/28651) and [this](https://stackoverflow.com/a/42500212/171456) – Carol Skelly Aug 26 '17 at 17:57
  • @Edgar Henriquez, also if you see my image there is a rectangle in which there are 2 texts 'Qualifications' and 'Go Here' which should come at the bottom of 'Web Designer' text. Is there any way, we can do that in Bootstrap or CSS ? –  Aug 26 '17 at 18:01
  • @user5447339 I have modified my answer to include the list. You'll have to add the desired style though. – Edgar Henriquez Aug 26 '17 at 18:09
0

Run this below Snippet :

.sections{
    width: 100%;
}
.sections .row {
    padding-top: 100px;
}

.sections .left-side {
    font-style: italic;
    float:left;
    width:45%;
}

.sections .right-side {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    max-width: 320px !important;
    height: 100px;
    font-style: italic;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 10px;
    float: right;
    width:50%;
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Homesail</title>
    <link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test.css">
</head>




<body>


    <div class="sections">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 left-side"> <a href="">Development &amp; Design</a></div>
                <div class="col-lg-6 right-side"> <a href="">Web Designer</a>
                <ul>
                  <a href=''><li>Qualification</li></a>
                  <a href=''><li>Go here</li></a>
                </ul></div>
            </div>
        </div>
    </div>
</body>

</html>
Maulik
  • 765
  • 3
  • 14